Merge pull request #10815 from growilabs/claude/fix-search-input-keys-8stxk

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

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.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) {

apps/app/src/features/search/client/interfaces/downshift.ts

@@ -1,5 +1,14 @@
 import type { ControllerStateAndHelpers } from 'downshift';
 
+// Augment the global Event interface with downshift's custom property.
+// downshift checks event.nativeEvent.preventDownshiftDefault to skip
+// its default key handling. See: https://www.downshift-js.com/downshift#customizing-handlers
+declare global {
+  interface Event {
+    preventDownshiftDefault?: boolean;
+  }
+}
+
 export type DownshiftItem = { url: string };
 
 export type GetItemProps =