diff --git a/components/QuickSwitcher.tsx b/components/QuickSwitcher.tsx index f902554ab..2149ee921 100644 --- a/components/QuickSwitcher.tsx +++ b/components/QuickSwitcher.tsx @@ -97,15 +97,18 @@ const IS_MAC = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(naviga const HostItem = memo(({ host, isSelected, + selectedItemRef, onSelect, onMouseEnter, }: { host: Host; isSelected: boolean; + selectedItemRef?: React.Ref; onSelect: (host: Host) => void; onMouseEnter: () => void; }) => (
onSelect(host)} @@ -192,6 +195,7 @@ const QuickSwitcherInner: React.FC = ({ const [selectedIndex, setSelectedIndex] = useState(0); const inputRef = useRef(null); const containerRef = useRef(null); + const selectedItemRef = useRef(null); // Reset state when opening useEffect(() => { @@ -322,6 +326,14 @@ const QuickSwitcherInner: React.FC = ({ return itemIndexMap.get(`${type}:${id}`) ?? -1; }, [itemIndexMap]); + const selectedItem = flatItems[selectedIndex]; + const selectedItemKey = selectedItem ? `${selectedItem.type}:${selectedItem.id}` : ''; + + useEffect(() => { + if (!isOpen || !selectedItemKey) return; + selectedItemRef.current?.scrollIntoView({ block: "nearest" }); + }, [isOpen, selectedIndex, selectedItemKey]); + if (!isOpen) return null; const handleKeyDown = (e: React.KeyboardEvent) => { @@ -449,6 +461,7 @@ const QuickSwitcherInner: React.FC = ({ key={host.id} host={host} isSelected={getItemIndex("host", host.id) === selectedIndex} + selectedItemRef={getItemIndex("host", host.id) === selectedIndex ? selectedItemRef : undefined} onSelect={onSelect} onMouseEnter={() => setSelectedIndex(getItemIndex("host", host.id))} /> @@ -479,6 +492,7 @@ const QuickSwitcherInner: React.FC = ({ return (
{ @@ -503,6 +517,7 @@ const QuickSwitcherInner: React.FC = ({ return (
{ @@ -529,6 +544,7 @@ const QuickSwitcherInner: React.FC = ({ return (
{ @@ -563,6 +579,7 @@ const QuickSwitcherInner: React.FC = ({ return (
= ({
= ({ } else if (e.key === 'ArrowUp') { e.preventDefault(); setSelectedIndex((i) => Math.max(i - 1, 0)); - } else if (e.key === ' ' || (e.key === 'Enter' && !(e.metaKey || e.ctrlKey))) { + } else if (e.key === 'Enter' && !(e.metaKey || e.ctrlKey)) { if (items.length === 0) return; e.preventDefault(); toggle(items[selectedIndex].id); @@ -180,7 +180,7 @@ export const AddToWorkspaceDialog: React.FC = ({ {/* Jump-to hint */}
Pick one or more - Space + Enter toggle {typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform) ? '⌘' : 'Ctrl'}+Enter