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 (
{