fix(react-search): Restore focus to SearchBox after clear button is…

… clicked (#33340)
microsoft · Nov 26, 2024 · 94f7b85 · 94f7b85
1 parent 34423d6
commit 94f7b85
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/change/@fluentui-react-search-ee89326e-8228-4cb3-911a-25ccd8ea4f8e.json b/change/@fluentui-react-search-ee89326e-8228-4cb3-911a-25ccd8ea4f8e.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(react-search): restore focus to SearchBox after clear button is clicked",
+  "packageName": "@fluentui/react-search",
+  "email": "jiangemma@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-search/library/src/components/SearchBox/useSearchBox.tsx b/packages/react-components/react-search/library/src/components/SearchBox/useSearchBox.tsx
@@ -66,6 +66,8 @@ export const useSearchBox_unstable = (props: SearchBoxProps, ref: React.Ref<HTML
     const newValue = '';
     setInternalValue(newValue);
     props.onChange?.(event, { value: newValue });
+
+    searchBoxRef.current?.focus();
   });
 
   const inputState = useInput_unstable(