SILVER
/
NODEDC_TASKMANAGER
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: исправление самопроизвольно открытого селекта в деталях внутреннего контура

This commit is contained in:
DCCONSTRUCTIONS 2026-04-20 18:08:07 +03:00
parent 5b2a2fc104
commit cbd40791e4
1 changed files with 93 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
plane-src/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
View File

@ -127,97 +127,103 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
onChange={(value) => onSelect(value)} onChange={(value) => onSelect(value)}
multiple multiple
> >
<Combobox.Button as={Fragment}> {({ open }) => (
<button <>
ref={setReferenceElement} <Combobox.Button as={Fragment}>
type="button" <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" ref={setReferenceElement}
onClick={() => !projectLabels && fetchLabels()} 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"
{label} onClick={() => !projectLabels && fetchLabels()}
</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}
> >
<div> {label}
<div className="nodedc-dropdown-search"> </button>
<SearchIcon className="h-3.5 w-3.5 text-tertiary" /> </Combobox.Button>
<Combobox.Input
className="w-full bg-transparent px-0 py-0 text-12 text-secondary placeholder:text-placeholder outline-none focus:outline-none" {open &&
value={query} typeof document !== "undefined" &&
onChange={(e) => setQuery(e.target.value)} createPortal(
placeholder={t("common.search.label")} <Combobox.Options className="fixed z-[760]" static>
displayValue={(assigned: any) => assigned?.name} <div
onKeyDown={searchInputKeyDown} data-prevent-outside-click
tabIndex={baseTabIndex} className="nodedc-dropdown-surface nodedc-external-popup-anchor z-10 my-1 w-56 whitespace-nowrap"
/> ref={setPopperElement}
</div> style={styles.popper}
</div> {...attributes.popper}
<div className={`vertical-scrollbar mt-2 scrollbar-sm max-h-56 space-y-1 overflow-y-auto`}> >
{isLoading ? ( <div>
<p className="px-2 py-2 text-center text-secondary">{t("common.loading")}</p> <div className="nodedc-dropdown-search">
) : filteredOptions.length > 0 ? ( <SearchIcon className="h-3.5 w-3.5 text-tertiary" />
filteredOptions.map((option) => ( <Combobox.Input
<Combobox.Option className="w-full bg-transparent px-0 py-0 text-12 text-secondary placeholder:text-placeholder outline-none focus:outline-none"
key={option.value} value={query}
value={option.value} onChange={(e) => setQuery(e.target.value)}
className={({ selected }) => placeholder={t("common.search.label")}
`nodedc-dropdown-option cursor-pointer ${ displayValue={(assigned: any) => assigned?.name}
selected ? "text-primary" : "text-secondary" onKeyDown={searchInputKeyDown}
}` tabIndex={baseTabIndex}
} />
> </div>
{({ selected }) => ( </div>
<> <div className={`vertical-scrollbar mt-2 scrollbar-sm max-h-56 space-y-1 overflow-y-auto`}>
{option.content} {isLoading ? (
{selected && ( <p className="px-2 py-2 text-center text-secondary">{t("common.loading")}</p>
<div className="flex-shrink-0"> ) : filteredOptions.length > 0 ? (
<CheckIcon className={`h-3.5 w-3.5`} /> filteredOptions.map((option) => (
</div> <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>
)} ))
</Combobox.Option> ) : submitting ? (
)) <Loader className="spin mx-auto h-3.5 w-3.5" />
) : submitting ? ( ) : canCreateLabel ? (
<Loader className="spin mx-auto h-3.5 w-3.5" /> <Combobox.Option
) : canCreateLabel ? ( value={query}
<Combobox.Option onClick={(e) => {
value={query} e.preventDefault();
onClick={(e) => { e.stopPropagation();
e.preventDefault(); if (!query.length) return;
e.stopPropagation(); handleAddLabel(query);
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"}`}
}} >
className={`rounded-[0.9rem] px-2 py-2 text-left text-secondary ${query.length ? "cursor-pointer hover:bg-white/6" : "cursor-default"}`} {query.length ? (
> <>
{query.length ? ( + {t("label.create.type")} <span className="text-primary">&quot;{query}&quot;</span>
<> </>
+ {t("label.create.type")} <span className="text-primary">&quot;{query}&quot;</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> </div>
) : ( </div>
<p className="rounded-[0.9rem] px-2 py-2 text-left text-secondary"> </Combobox.Options>,
{t("common.search.no_matching_results")} document.body
</p> )}
)} </>
</div> )}
</div>
</Combobox.Options>,
document.body
)}
</Combobox> </Combobox>
</> </>
); );