From 45f3a67c4c174fa9cf7f65038ac7f374cccb5c6a Mon Sep 17 00:00:00 2001
From: Emma Indal <emmai@spotify.com>
Date: Fri, 12 Nov 2021 12:39:31 +0100
Subject: [PATCH] add focused prop to both SearchBar and SearchBarBase
 components + storybook example

Signed-off-by: Emma Indal <emmai@spotify.com>
---
 .../components/SearchBar/SearchBar.stories.tsx  | 17 +++++++++++++++++
 .../src/components/SearchBar/SearchBar.tsx      | 11 +++++++++--
 .../src/components/SearchModal/SearchModal.tsx  |  1 +
 3 files changed, 27 insertions(+), 2 deletions(-)

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 = () => {
     </MemoryRouter>
   );
 };
+
+export const Focused = () => {
+  return (
+    <MemoryRouter>
+      {/* @ts-ignore (defaultValue requires more than what is used here) */}
+      <SearchContext.Provider value={defaultValue}>
+        <Grid container direction="row">
+          <Grid item xs={12}>
+            <Paper style={{ padding: '8px 0' }}>
+              <SearchBar focused />
+            </Paper>
+          </Grid>
+        </Grid>
+      </SearchContext.Provider>
+    </MemoryRouter>
+  );
+};
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<HTMLInputElement>();
 
   useEffect(() => {
-    inputRef?.current?.focus();
-  }, []);
+    if (focused) {
+      inputRef?.current?.focus();
+    }
+  }, [focused]);
 
   const onKeyDown = React.useCallback(
     (e: KeyboardEvent<HTMLInputElement>) => {
@@ -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 (
     <SearchBarBase
+      focused={focused}
       className={className}
       value={value}
       onChange={handleQuery}
diff --git a/plugins/search/src/components/SearchModal/SearchModal.tsx b/plugins/search/src/components/SearchModal/SearchModal.tsx
index 75d4b07a3c..6229478dd0 100644
--- a/plugins/search/src/components/SearchModal/SearchModal.tsx
+++ b/plugins/search/src/components/SearchModal/SearchModal.tsx
@@ -99,6 +99,7 @@ export const Modal = ({ open = true, toggleModal }: SearchModalProps) => {
       <DialogTitle>
         <Paper className={classes.container}>
           <SearchBarBase
+            focused
             className={classes.input}
             value={value}
             onChange={handleQuery}