mirror of
https://github.com/coder/coder.git
synced 2026-09-24 15:04:27 +08:00
fix: scroll item list into view when opening MultiSelectCombobox (#19806)
This commit is contained in:
@@ -216,6 +216,7 @@ export const MultiSelectCombobox = forwardRef<
|
||||
const [onScrollbar, setOnScrollbar] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
const listRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [selected, setSelected] = useState<Option[]>(
|
||||
arrayDefaultOptions ?? [],
|
||||
@@ -364,6 +365,15 @@ export const MultiSelectCombobox = forwardRef<
|
||||
void exec();
|
||||
}, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus, onSearch]);
|
||||
|
||||
// Scroll dropdown into view on open
|
||||
useEffect(() => {
|
||||
if (!open || !listRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
listRef.current.scrollIntoView({ behavior: "smooth" });
|
||||
}, [open]);
|
||||
|
||||
const CreatableItem = () => {
|
||||
if (!creatable) {
|
||||
return undefined;
|
||||
@@ -603,7 +613,7 @@ export const MultiSelectCombobox = forwardRef<
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<div className="relative" ref={listRef}>
|
||||
{open && (
|
||||
<CommandList
|
||||
className={`absolute top-1 z-10 w-full rounded-md
|
||||
|
||||
Reference in New Issue
Block a user