diff --git a/polaris-react/src/components/Picker/Picker.tsx b/polaris-react/src/components/Picker/Picker.tsx index fb9eeb1e283..ac0a65bff47 100644 --- 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(false); const shouldOpen = !popoverActive; - useEffect(() => { - setFilteredOptions(options); - }, [options]); - const handleClose = useCallback(() => { setPopoverActive(false); onClose?.(); @@ -223,7 +213,7 @@ export function Picker({ }} prefix={} labelHidden - autoFocus + focused /> diff --git a/polaris-react/src/components/Picker/components/SearchField/SearchField.tsx b/polaris-react/src/components/Picker/components/SearchField/SearchField.tsx index f2e73d2d860..dcf2577049e 100644 --- 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(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 ( <>