Просмотр исходного кода

fix(search): prevent Downshift from intercepting Home/End keys in search input

Home and End keys were being captured by Downshift's list navigation
(jumping to first/last item), instead of moving the cursor to the
beginning/end of the text input. Setting preventDownshiftDefault on
the native event tells Downshift to skip its handling for these keys.

https://claude.ai/code/session_019Mh5cVjsoTfZnxVjamHkvf
Claude 1 месяц назад
Родитель
Сommit
7e535aca07
1 измененных файлов с 13 добавлено и 1 удалено
  1. 13 1
      apps/app/src/features/search/client/components/SearchForm.tsx

+ 13 - 1
apps/app/src/features/search/client/components/SearchForm.tsx

@@ -41,6 +41,17 @@ export const SearchForm = (props: Props): JSX.Element => {
     [searchKeyword, onSubmit],
   );
 
+  // Prevent Downshift from intercepting Home/End keys so they move
+  // the cursor within the input field instead of navigating the list
+  const keyDownHandler = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Home' || e.key === 'End') {
+        (e.nativeEvent as { preventDownshiftDefault?: boolean }).preventDownshiftDefault = true;
+      }
+    },
+    [],
+  );
+
   const inputOptions = useMemo(() => {
     return getInputProps({
       type: 'text',
@@ -49,8 +60,9 @@ export const SearchForm = (props: Props): JSX.Element => {
       ref: inputRef,
       value: searchKeyword,
       onChange: changeSearchTextHandler,
+      onKeyDown: keyDownHandler,
     });
-  }, [getInputProps, searchKeyword, changeSearchTextHandler]);
+  }, [getInputProps, searchKeyword, changeSearchTextHandler, keyDownHandler]);
 
   useEffect(() => {
     if (inputRef.current != null) {