diff --git a/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx b/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx index c1e518c3a3..06b2660df2 100644 --- a/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx +++ b/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx @@ -216,6 +216,7 @@ export const MultiSelectCombobox = forwardRef< const [onScrollbar, setOnScrollbar] = useState(false); const [isLoading, setIsLoading] = useState(false); const dropdownRef = useRef(null); + const listRef = useRef(null); const [selected, setSelected] = useState( 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< -
+
{open && (