diff --git a/plugins/search/src/components/SearchBar/SearchBar.stories.tsx b/plugins/search/src/components/SearchBar/SearchBar.stories.tsx index 2c990e512c..27a739006a 100644 --- a/plugins/search/src/components/SearchBar/SearchBar.stories.tsx +++ b/plugins/search/src/components/SearchBar/SearchBar.stories.tsx @@ -62,3 +62,20 @@ export const CustomPlaceholder = () => { ); }; + +export const Focused = () => { + return ( + + {/* @ts-ignore (defaultValue requires more than what is used here) */} + + + + + + + + + + + ); +}; diff --git a/plugins/search/src/components/SearchBar/SearchBar.tsx b/plugins/search/src/components/SearchBar/SearchBar.tsx index 8d493df5f8..5d503c5c44 100644 --- a/plugins/search/src/components/SearchBar/SearchBar.tsx +++ b/plugins/search/src/components/SearchBar/SearchBar.tsx @@ -30,9 +30,11 @@ type PresenterProps = { onSubmit?: () => void; className?: string; placeholder?: string; + focused?: boolean; }; export const SearchBarBase = ({ + focused, value, onChange, onSubmit, @@ -43,8 +45,10 @@ export const SearchBarBase = ({ const inputRef = useRef(); useEffect(() => { - inputRef?.current?.focus(); - }, []); + if (focused) { + inputRef?.current?.focus(); + } + }, [focused]); const onKeyDown = React.useCallback( (e: KeyboardEvent) => { @@ -93,12 +97,14 @@ export const SearchBarBase = ({ }; type Props = { + focused?: boolean; className?: string; debounceTime?: number; placeholder?: string; }; export const SearchBar = ({ + focused, className, debounceTime = 0, placeholder, @@ -120,6 +126,7 @@ export const SearchBar = ({ return ( {