mirror of
https://github.com/fluxerapp/fluxer
synced 2026-10-07 19:22:14 +09:00
fix(app): scroll quick switcher selection after typing (#3044)
This commit is contained in:
@@ -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"
|
||||
/>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user