add focused prop to both SearchBar and SearchBarBase components + storybook example

Signed-off-by: Emma Indal <emmai@spotify.com>

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>
+  );
+};

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}

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}