Prevent user input from being blocked in SearchView

HorusGoul · Dec 13, 2024 · 53ce73a · 53ce73a
1 parent 4b85e65
commit 53ce73a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/apps/pwa/src/components/search-view/SearchView.tsx b/apps/pwa/src/components/search-view/SearchView.tsx
@@ -21,8 +21,8 @@ function SearchView() {
   const { i18n } = useLocale();
   const navigate = useNavigate();
   const params = useQuery();
-  const searchInput = useSearchInput("replace");
-  const query = searchInput.value.trim();
+  const { value, inputProps } = useSearchInput("replace");
+  const query = value.trim();
   const openSearch = params.get("openSearch");
   const deferredQuery = React.useDeferredValue(query);
   const results = useContentSearch(deferredQuery);
@@ -66,7 +66,7 @@ function SearchView() {
                 <Icon name="arrow_back" />
               </Button>
 
-              <input type="text" autoFocus {...searchInput} />
+              <input type="text" autoFocus {...inputProps} />
 
               {isLoading && (
                 <div className={styles.spinner}>

diff --git a/apps/pwa/src/components/search-view/useSearchInput.ts b/apps/pwa/src/components/search-view/useSearchInput.ts
@@ -25,8 +25,11 @@ export function useSearchInput(type: "push" | "replace") {
 
   return {
     value,
-    onChange,
-    placeholder: i18n("Search_dots"),
-    "aria-label": i18n("Search"),
+    inputProps: {
+      defaultValue: value,
+      onChange,
+      placeholder: i18n("Search_dots"),
+      "aria-label": i18n("Search"),
+    },
   };
 }