feat(SearchBox): introduce autoFocus prop (#3599)

examples/hooks/App.tsx

@@ -107,7 +107,7 @@ export function App() {
             ]}
           />
 
-          <SearchBox placeholder="Search" />
+          <SearchBox placeholder="Search" autoFocus />
 
           <div className="Search-header">
             <PoweredBy />

packages/react-instantsearch-hooks-web/src/ui/SearchBox.tsx

@@ -62,7 +62,10 @@ export type SearchBoxProps = Omit<
 > &
   Pick<React.ComponentProps<'form'>, 'onSubmit'> &
   Required<Pick<React.ComponentProps<'form'>, 'onReset'>> &
-  Pick<React.ComponentProps<'input'>, 'placeholder' | 'onChange'> & {
+  Pick<
+    React.ComponentProps<'input'>,
+    'placeholder' | 'onChange' | 'autoFocus'
+  > & {
     inputRef: React.RefObject<HTMLInputElement>;
     isSearchStalled: boolean;
     value: string;
@@ -135,6 +138,7 @@ export function SearchBox({
   onSubmit,
   placeholder,
   value,
+  autoFocus,
   resetIconComponent: ResetIcon = DefaultResetIcon,
   submitIconComponent: SubmitIcon = DefaultSubmitIcon,
   loadingIconComponent: LoadingIcon = DefaultLoadingIcon,
@@ -190,6 +194,7 @@ export function SearchBox({
           type="search"
           value={value}
           onChange={onChange}
+          autoFocus={autoFocus}
         />
         <button
           className={cx('ais-SearchBox-submit', classNames.submit)}

packages/react-instantsearch-hooks-web/src/ui/__tests__/SearchBox.test.tsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React, { createRef } from 'react';
 
@@ -20,6 +20,7 @@ describe('SearchBox', () => {
       onSubmit,
       placeholder: '',
       value: '',
+      autoFocus: false,
       translations: {
         submitTitle: 'Submit the search query.',
         resetTitle: 'Clear the search query.',
@@ -132,6 +133,8 @@ describe('SearchBox', () => {
         </div>
       </div>
     `);
+
+    expect(within(container).getByRole('searchbox')).not.toHaveFocus();
   });
 
   test('renders with translations', () => {
@@ -322,6 +325,14 @@ describe('SearchBox', () => {
     );
   });
 
+  test('forwards the `autoFocus` prop to the input', () => {
+    const props = createProps({ autoFocus: true });
+
+    const { container } = render(<SearchBox {...props} />);
+
+    expect(within(container).getByRole('searchbox')).toHaveFocus();
+  });
+
   test('with input value shows the reset button', () => {
     const props = createProps({ value: 'query' });
 

packages/react-instantsearch-hooks-web/src/widgets/SearchBox.tsx

@@ -14,12 +14,13 @@ type UiProps = Pick<
   | 'onReset'
   | 'onSubmit'
   | 'value'
+  | 'autoFocus'
   | 'translations'
 >;
 
 export type SearchBoxProps = Omit<
   SearchBoxUiComponentProps,
-  Exclude<keyof UiProps, 'onSubmit'>
+  Exclude<keyof UiProps, 'onSubmit' | 'autoFocus'>
 > &
   UseSearchBoxProps & {
     /**

packages/react-instantsearch-hooks-web/src/widgets/__tests__/SearchBox.test.tsx

@@ -1,4 +1,4 @@
-import { act, render, waitFor } from '@testing-library/react';
+import { act, render, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
@@ -113,6 +113,8 @@ describe('SearchBox', () => {
         </div>
       `);
     });
+
+    expect(within(container).getByRole('searchbox')).not.toHaveFocus();
   });
 
   test('forwards placeholder prop', async () => {
@@ -130,6 +132,18 @@ describe('SearchBox', () => {
     });
   });
 
+  test('forwards `autoFocus` prop', async () => {
+    const { container } = render(
+      <InstantSearchHooksTestWrapper>
+        <SearchBox autoFocus />
+      </InstantSearchHooksTestWrapper>
+    );
+
+    await waitFor(() => {
+      expect(within(container).getByRole('searchbox')).toHaveFocus();
+    });
+  });
+
   test('sets query on change event', async () => {
     let lastUiState: UiState = {};