UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: исправление самопроизвольно открытого селекта в деталях внутреннего контура
This commit is contained in:
DCCONSTRUCTIONS
parent
5b2a2fc104
commit
cbd40791e4
|
|
@ -127,97 +127,103 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
|
|||
onChange={(value) => onSelect(value)}
|
||||
multiple
|
||||
>
|
||||
<Combobox.Button as={Fragment}>
|
||||
<button
|
||||
ref={setReferenceElement}
|
||||
type="button"
|
||||
className="flex h-7.5 items-center rounded-[1rem] border-0 bg-transparent py-0.5 pl-0 pr-2 text-body-xs-medium text-placeholder whitespace-nowrap shadow-none outline-none"
|
||||
onClick={() => !projectLabels && fetchLabels()}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
</Combobox.Button>
|
||||
|
||||
{typeof document !== "undefined" &&
|
||||
createPortal(
|
||||
<Combobox.Options className="fixed z-[760]" static>
|
||||
<div
|
||||
className="nodedc-dropdown-surface nodedc-external-popup-anchor z-10 my-1 w-56 whitespace-nowrap"
|
||||
ref={setPopperElement}
|
||||
style={styles.popper}
|
||||
{...attributes.popper}
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Combobox.Button as={Fragment}>
|
||||
<button
|
||||
ref={setReferenceElement}
|
||||
type="button"
|
||||
className="flex h-7.5 items-center rounded-[1rem] border-0 bg-transparent py-0.5 pl-0 pr-2 text-body-xs-medium text-placeholder whitespace-nowrap shadow-none outline-none"
|
||||
onClick={() => !projectLabels && fetchLabels()}
|
||||
>
|
||||
<div>
|
||||
<div className="nodedc-dropdown-search">
|
||||
<SearchIcon className="h-3.5 w-3.5 text-tertiary" />
|
||||
<Combobox.Input
|
||||
className="w-full bg-transparent px-0 py-0 text-12 text-secondary placeholder:text-placeholder outline-none focus:outline-none"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder={t("common.search.label")}
|
||||
displayValue={(assigned: any) => assigned?.name}
|
||||
onKeyDown={searchInputKeyDown}
|
||||
tabIndex={baseTabIndex}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`vertical-scrollbar mt-2 scrollbar-sm max-h-56 space-y-1 overflow-y-auto`}>
|
||||
{isLoading ? (
|
||||
<p className="px-2 py-2 text-center text-secondary">{t("common.loading")}</p>
|
||||
) : filteredOptions.length > 0 ? (
|
||||
filteredOptions.map((option) => (
|
||||
<Combobox.Option
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
className={({ selected }) =>
|
||||
`nodedc-dropdown-option cursor-pointer ${
|
||||
selected ? "text-primary" : "text-secondary"
|
||||
}`
|
||||
}
|
||||
>
|
||||
{({ selected }) => (
|
||||
<>
|
||||
{option.content}
|
||||
{selected && (
|
||||
<div className="flex-shrink-0">
|
||||
<CheckIcon className={`h-3.5 w-3.5`} />
|
||||
</div>
|
||||
{label}
|
||||
</button>
|
||||
</Combobox.Button>
|
||||
|
||||
{open &&
|
||||
typeof document !== "undefined" &&
|
||||
createPortal(
|
||||
<Combobox.Options className="fixed z-[760]" static>
|
||||
<div
|
||||
data-prevent-outside-click
|
||||
className="nodedc-dropdown-surface nodedc-external-popup-anchor z-10 my-1 w-56 whitespace-nowrap"
|
||||
ref={setPopperElement}
|
||||
style={styles.popper}
|
||||
{...attributes.popper}
|
||||
>
|
||||
<div>
|
||||
<div className="nodedc-dropdown-search">
|
||||
<SearchIcon className="h-3.5 w-3.5 text-tertiary" />
|
||||
<Combobox.Input
|
||||
className="w-full bg-transparent px-0 py-0 text-12 text-secondary placeholder:text-placeholder outline-none focus:outline-none"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder={t("common.search.label")}
|
||||
displayValue={(assigned: any) => assigned?.name}
|
||||
onKeyDown={searchInputKeyDown}
|
||||
tabIndex={baseTabIndex}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`vertical-scrollbar mt-2 scrollbar-sm max-h-56 space-y-1 overflow-y-auto`}>
|
||||
{isLoading ? (
|
||||
<p className="px-2 py-2 text-center text-secondary">{t("common.loading")}</p>
|
||||
) : filteredOptions.length > 0 ? (
|
||||
filteredOptions.map((option) => (
|
||||
<Combobox.Option
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
className={({ selected }) =>
|
||||
`nodedc-dropdown-option cursor-pointer ${
|
||||
selected ? "text-primary" : "text-secondary"
|
||||
}`
|
||||
}
|
||||
>
|
||||
{({ selected }) => (
|
||||
<>
|
||||
{option.content}
|
||||
{selected && (
|
||||
<div className="flex-shrink-0">
|
||||
<CheckIcon className={`h-3.5 w-3.5`} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Combobox.Option>
|
||||
))
|
||||
) : submitting ? (
|
||||
<Loader className="spin mx-auto h-3.5 w-3.5" />
|
||||
) : canCreateLabel ? (
|
||||
<Combobox.Option
|
||||
value={query}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (!query.length) return;
|
||||
handleAddLabel(query);
|
||||
}}
|
||||
className={`rounded-[0.9rem] px-2 py-2 text-left text-secondary ${query.length ? "cursor-pointer hover:bg-white/6" : "cursor-default"}`}
|
||||
>
|
||||
{query.length ? (
|
||||
<>
|
||||
+ {t("label.create.type")} <span className="text-primary">"{query}"</span>
|
||||
</>
|
||||
</Combobox.Option>
|
||||
))
|
||||
) : submitting ? (
|
||||
<Loader className="spin mx-auto h-3.5 w-3.5" />
|
||||
) : canCreateLabel ? (
|
||||
<Combobox.Option
|
||||
value={query}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (!query.length) return;
|
||||
handleAddLabel(query);
|
||||
}}
|
||||
className={`rounded-[0.9rem] px-2 py-2 text-left text-secondary ${query.length ? "cursor-pointer hover:bg-white/6" : "cursor-default"}`}
|
||||
>
|
||||
{query.length ? (
|
||||
<>
|
||||
+ {t("label.create.type")} <span className="text-primary">"{query}"</span>
|
||||
</>
|
||||
) : (
|
||||
t("label.create.type")
|
||||
)}
|
||||
</Combobox.Option>
|
||||
) : (
|
||||
t("label.create.type")
|
||||
<p className="rounded-[0.9rem] px-2 py-2 text-left text-secondary">
|
||||
{t("common.search.no_matching_results")}
|
||||
</p>
|
||||
)}
|
||||
</Combobox.Option>
|
||||
) : (
|
||||
<p className="rounded-[0.9rem] px-2 py-2 text-left text-secondary">
|
||||
{t("common.search.no_matching_results")}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Combobox.Options>,
|
||||
document.body
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Combobox.Options>,
|
||||
document.body
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Combobox>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue