fix: scroll item list into view when opening MultiSelectCombobox

aslilac · aslilac · commit 3a07d137f9ca · 2025-09-12T19:18:56.000Z
diff --git 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<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
