feat(dashboard): scroll selected autocomplete item into view

Closes bd-4lc. When navigating with arrow keys, the selected item now
scrolls into view using scrollIntoView({ block: 'nearest' }) to prevent
jarring scrolls when item is already visible.
This commit is contained in:
teernisse
2026-02-26 16:55:26 -05:00
parent db3d2a2e31
commit 49a57b5364
2 changed files with 13 additions and 2 deletions

File diff suppressed because one or more lines are too long

View File

@@ -89,6 +89,17 @@ export function SimpleInput({ sessionId, status, onRespond, autocompleteConfig =
return () => document.removeEventListener('mousedown', handleClickOutside);
}, [showAutocomplete]);
// Scroll selected item into view when navigating with arrow keys
useEffect(() => {
if (showAutocomplete && autocompleteRef.current) {
const container = autocompleteRef.current;
const selectedEl = container.children[selectedIndex];
if (selectedEl) {
selectedEl.scrollIntoView({ block: 'nearest' });
}
}
}, [selectedIndex, showAutocomplete]);
// Insert a selected skill into the text
const insertSkill = useCallback((skill) => {
if (!triggerInfo || !autocompleteConfig) return;