diff --git a/fluxer_app/src/features/search/components/quick_switcher/QuickSwitcherModal.tsx b/fluxer_app/src/features/search/components/quick_switcher/QuickSwitcherModal.tsx index 45e1dba22..4b5292a12 100644 --- a/fluxer_app/src/features/search/components/quick_switcher/QuickSwitcherModal.tsx +++ b/fluxer_app/src/features/search/components/quick_switcher/QuickSwitcherModal.tsx @@ -129,7 +129,6 @@ const ResultRow = observer( optionId, positionInSet, setSize, - innerRef, }: { result: QuickSwitcherResult; index: number; @@ -139,7 +138,6 @@ const ResultRow = observer( optionId: string; positionInSet: number; setSize: number; - innerRef?: React.Ref; }) => { const {i18n} = useLingui(); if (result.type === QuickSwitcherResultTypes.HEADER) { @@ -195,7 +193,6 @@ const ResultRow = observer( aria-posinset={positionInSet} aria-setsize={setSize} className={clsx(quickStyles.option, isActive && quickStyles.optionActive)} - ref={innerRef} onMouseEnter={handleMouseEnter} onMouseDown={(event) => { if (event.button === 0) event.preventDefault(); @@ -288,7 +285,6 @@ const QuickSwitcherModalComponent: React.FC = observer(() => { const quickSwitcherId = useId(); const inputRef = useRef(null); const scrollerRef = useRef(null); - const rowRefs = useRef>([]); const previousQueryRef = useRef(query); const [isKeyboardNavigating, setIsKeyboardNavigating] = useState(true); const isMobile = MobileLayout.isMobileLayout(); @@ -297,9 +293,6 @@ const QuickSwitcherModalComponent: React.FC = observer(() => { const statusId = `${quickSwitcherId}-status`; const suggestionStatusId = `${quickSwitcherId}-suggestion-status`; const hintId = `${quickSwitcherId}-hint`; - if (rowRefs.current.length !== results.length) { - rowRefs.current = Array(results.length).fill(null); - } useQuickSwitcherKeyboardHandling(isOpen, isMobile, inputRef, query); useQuickSwitcherInputFocus(isOpen, isMobile, undefined, inputRef); const escapeIntentRef = useQuickSwitcherEscapeIntent(isOpen && !isMobile); @@ -366,11 +359,11 @@ const QuickSwitcherModalComponent: React.FC = observer(() => { if (!isKeyboardNavigating || selectedIndex < 0) { return; } - const node = rowRefs.current[selectedIndex]; + const node = document.getElementById(getQuickSwitcherOptionId(listboxId, selectedIndex)); if (node) { scroller.revealElement({node, padding: SELECTED_ROW_SCROLL_PADDING}); } - }, [isKeyboardNavigating, query, results, selectedIndex]); + }, [isKeyboardNavigating, listboxId, query, results, selectedIndex]); const sections = useMemo(() => createSections(results), [results]); const selectableIndices = useMemo( () => @@ -571,9 +564,6 @@ const QuickSwitcherModalComponent: React.FC = observer(() => { optionId={getQuickSwitcherOptionId(listboxId, index)} positionInSet={selectableIndices.indexOf(index) + 1} setSize={resultCount} - innerRef={(node) => { - rowRefs.current[index] = node; - }} data-flx="search.quick-switcher.quick-switcher-modal.quick-switcher-modal-component.result-row" /> ))}