add manual focus back

Shopify · Mar 20, 2024 · 05bab3a · 05bab3a
1 parent 04b48e4
commit 05bab3a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 13 deletions.
diff --git a/polaris-react/src/components/Picker/Picker.tsx b/polaris-react/src/components/Picker/Picker.tsx
@@ -1,10 +1,4 @@
-import React, {
-  useState,
-  useCallback,
-  useMemo,
-  isValidElement,
-  useEffect,
-} from 'react';
+import React, {useState, useCallback, useMemo, isValidElement} from 'react';
 import {SearchIcon} from '@shopify/polaris-icons';
 
 import {Popover} from '../Popover';
@@ -76,10 +70,6 @@ export function Picker({
   const [textFieldFocused, setTextFieldFocused] = useState<boolean>(false);
   const shouldOpen = !popoverActive;
 
-  useEffect(() => {
-    setFilteredOptions(options);
-  }, [options]);
-
   const handleClose = useCallback(() => {
     setPopoverActive(false);
     onClose?.();
@@ -223,7 +213,7 @@ export function Picker({
                 }}
                 prefix={<Icon source={SearchIcon} />}
                 labelHidden
-                autoFocus
+                focused
               />
             </ComboboxTextFieldContext.Provider>
           </Box>

diff --git a/polaris-react/src/components/Picker/components/SearchField/SearchField.tsx b/polaris-react/src/components/Picker/components/SearchField/SearchField.tsx
@@ -21,6 +21,7 @@ export function SearchField({
   focused,
   autoFocus,
 }: TextFieldProps) {
+  const inputRef = React.useRef<HTMLInputElement>(null);
   const comboboxTextFieldContext = useComboboxTextField();
 
   const {
@@ -71,6 +72,13 @@ export function SearchField({
     [onChange, onTextFieldChange],
   );
 
+  if (
+    (focused ?? autoFocus) &&
+    inputRef.current &&
+    document.activeElement !== inputRef.current
+  )
+    inputRef.current.focus();
+
   return (
     <>
       <Label id={textFieldId} hidden={labelHidden}>
@@ -79,6 +87,7 @@ export function SearchField({
       <InlineStack gap="100" blockAlign="center">
         <span>{prefix}</span>
         <input
+          ref={inputRef}
           className={styles.SearchField}
           value={value}
           id={textFieldId}
@@ -92,7 +101,6 @@ export function SearchField({
           aria-controls={listboxId}
           onFocus={handleFocus}
           onBlur={handleBlur}
-          autoFocus={focused ?? autoFocus}
           onChange={({target}) => handleChange(target.value, textFieldId)}
         />
       </InlineStack>