From b02a6989471a018f41d2a5a4059d9fc23238e74f Mon Sep 17 00:00:00 2001
From: Emma Indal <emmai@spotify.com>
Date: Wed, 17 Nov 2021 17:16:40 +0100
Subject: [PATCH] use material-uis autoFocus prop as an option, not default

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

diff --git a/plugins/search/src/components/SearchBar/SearchBar.stories.tsx b/plugins/search/src/components/SearchBar/SearchBar.stories.tsx
index 27a739006a..72b8429026 100644
--- a/plugins/search/src/components/SearchBar/SearchBar.stories.tsx
+++ b/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>
diff --git a/plugins/search/src/components/SearchBar/SearchBar.tsx b/plugins/search/src/components/SearchBar/SearchBar.tsx
index 5d503c5c44..c1730bfcff 100644
--- a/plugins/search/src/components/SearchBar/SearchBar.tsx
+++ b/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}
diff --git a/plugins/search/src/components/SearchModal/SearchModal.tsx b/plugins/search/src/components/SearchModal/SearchModal.tsx
index 6229478dd0..75d4b07a3c 100644
--- a/plugins/search/src/components/SearchModal/SearchModal.tsx
+++ b/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}