fix(app): scroll quick switcher selection after typing (#3044)

This commit is contained in:
Hampus
2026-09-29 20:54:08 +02:00
committed by GitHub
parent 2808edf6d0
commit f0b3c82cfd
@@ -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<HTMLDivElement>;
}) => {
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<HTMLInputElement>(null);
const scrollerRef = useRef<ScrollerHandle>(null);
const rowRefs = useRef<Array<HTMLDivElement | null>>([]);
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"
/>
))}