use material-uis autoFocus prop as an option, not default

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

plugins/search/src/components/SearchBar/SearchBar.stories.tsx

@@ -71,7 +71,9 @@ export const Focused = () => {
         <Grid container direction="row">
           <Grid item xs={12}>
             <Paper style={{ padding: '8px 0' }}>
-              <SearchBar focused />
+              {/* decision up to adopter, read https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md#no-autofocus */}
+              {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
+              <SearchBar autoFocus />
             </Paper>
           </Grid>
         </Grid>

plugins/search/src/components/SearchBar/SearchBar.tsx

@@ -30,11 +30,11 @@ type PresenterProps = {
   onSubmit?: () => void;
   className?: string;
   placeholder?: string;
-  focused?: boolean;
+  autoFocus?: boolean;
 };
 
 export const SearchBarBase = ({
-  focused,
+  autoFocus,
   value,
   onChange,
   onSubmit,
@@ -42,13 +42,6 @@ export const SearchBarBase = ({
   placeholder: overridePlaceholder,
 }: PresenterProps) => {
   const configApi = useApi(configApiRef);
-  const inputRef = useRef<HTMLInputElement>();
-
-  useEffect(() => {
-    if (focused) {
-      inputRef?.current?.focus();
-    }
-  }, [focused]);
 
   const onKeyDown = React.useCallback(
     (e: KeyboardEvent<HTMLInputElement>) => {
@@ -69,7 +62,9 @@ export const SearchBarBase = ({
 
   return (
     <InputBase
-      inputRef={inputRef}
+      // decision up to adopter, read https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md#no-autofocus
+      // eslint-disable-next-line jsx-a11y/no-autofocus
+      autoFocus={autoFocus}
       data-testid="search-bar-next"
       fullWidth
       placeholder={placeholder}
@@ -97,14 +92,14 @@ export const SearchBarBase = ({
 };
 
 type Props = {
-  focused?: boolean;
+  autoFocus?: boolean;
   className?: string;
   debounceTime?: number;
   placeholder?: string;
 };
 
 export const SearchBar = ({
-  focused,
+  autoFocus,
   className,
   debounceTime = 0,
   placeholder,
@@ -126,7 +121,9 @@ export const SearchBar = ({
 
   return (
     <SearchBarBase
-      focused={focused}
+      // decision up to adopter, read https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md#no-autofocus
+      // eslint-disable-next-line jsx-a11y/no-autofocus
+      autoFocus={autoFocus}
       className={className}
       value={value}
       onChange={handleQuery}

plugins/search/src/components/SearchModal/SearchModal.tsx

@@ -99,7 +99,6 @@ export const Modal = ({ open = true, toggleModal }: SearchModalProps) => {
       <DialogTitle>
         <Paper className={classes.container}>
           <SearchBarBase
-            focused
             className={classes.input}
             value={value}
             onChange={handleQuery}