add initial focus to search input

Datawheel · Apr 19, 2024 · 3f68bfe · 3f68bfe
1 parent 72af363
commit 3f68bfe
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/packages/next/cms/components/fields/ProfileSearch.js b/packages/next/cms/components/fields/ProfileSearch.js
@@ -26,6 +26,7 @@ import ProfileTile from "./ProfileTile";
 import groupMeta from "../../utils/groupMeta";
 import stripHTML from "../../utils/formatters/stripHTML";
 import NonIdealState from "../../../core/components/NonIdealState";
+import {useFocus} from "./useFocus";
 
 function DimensionFilters({
   activeProfile,
@@ -277,6 +278,9 @@ export function ProfileSearch({
 
   const [debouncedQuery] = useDebouncedValue(query, 400);
   const profiles = useCMSProfiles();
+  const [inputRef, setInputFocus] = useFocus();
+
+  React.useLayoutEffect(() => setInputFocus(), [setInputFocus]);
 
   const ignoredTermsRegex = ignoredTerms && ignoredTerms.length > 0
     ? new RegExp(`\\b(${ignoredTerms.join("|")})\\b`, "ig")
@@ -409,7 +413,7 @@ export function ProfileSearch({
             </Text>
           </Text>
           <TextInput
-            ref={textInput}
+            ref={inputRef}
             className="cp-input"
             icon={<IconSearch />}
             size="xl"