Fix jumping cursor problem in SearchBar

As I understand it, there are some challenges with cursor placement in downshift. This is a way to handle it inspired from: downshift-js/downshift#1108 (comment)
reload · May 4, 2023 · 7d3ad80 · 7d3ad80
1 parent f111f0c
commit 7d3ad80
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/src/apps/search-header/search-header.tsx b/src/apps/search-header/search-header.tsx
@@ -302,6 +302,7 @@ const SearchHeader: React.FC = () => {
         <SearchBar
           getInputProps={getInputProps}
           getLabelProps={getLabelProps}
+          setQWithoutQuery={setQWithoutQuery}
         />
         <Autosuggest
           textData={textData}

diff --git a/src/components/search-bar/search-bar.tsx b/src/components/search-bar/search-bar.tsx
@@ -7,12 +7,14 @@ export interface SearchBarProps {
   getInputProps: UseComboboxPropGetters<unknown>["getInputProps"];
   getLabelProps: UseComboboxPropGetters<unknown>["getLabelProps"];
   dataCy?: string;
+  setQWithoutQuery: (value: string) => void;
 }
 
 const SearchBar: React.FC<SearchBarProps> = ({
   getInputProps,
   getLabelProps,
-  dataCy = "search-header-input"
+  dataCy = "search-header-input",
+  setQWithoutQuery
 }) => {
   const t = useText();
   return (
@@ -31,7 +33,11 @@ const SearchBar: React.FC<SearchBarProps> = ({
         autoComplete="off"
         placeholder={t("inputPlaceholderText")}
         aria-label={t("inputPlaceholderText")}
-        {...getInputProps()}
+        {...getInputProps({
+          onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+            setQWithoutQuery(e.target.value);
+          }
+        })}
       />
       {/* eslint-enable react/jsx-props-no-spreading */}
       <input