From 99121b952fd002cb6dae52af41f08beed8f6c3e2 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <5370675+sarahdayan@users.noreply.github.com>
Date: Mon, 22 Aug 2022 15:51:46 +0200
Subject: [PATCH] feat(SearchBox): introduce `autoFocus` prop (#3599)

---
 examples/hooks/App.tsx                           |  2 +-
 .../src/ui/SearchBox.tsx                         |  7 ++++++-
 .../src/ui/__tests__/SearchBox.test.tsx          | 13 ++++++++++++-
 .../src/widgets/SearchBox.tsx                    |  3 ++-
 .../src/widgets/__tests__/SearchBox.test.tsx     | 16 +++++++++++++++-
 5 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/examples/hooks/App.tsx b/examples/hooks/App.tsx
index d47550f13e..617259ba33 100644
--- a/examples/hooks/App.tsx
+++ b/examples/hooks/App.tsx
@@ -107,7 +107,7 @@ export function App() {
             ]}
           />
 
-          <SearchBox placeholder="Search" />
+          <SearchBox placeholder="Search" autoFocus />
 
           <div className="Search-header">
             <PoweredBy />
diff --git a/packages/react-instantsearch-hooks-web/src/ui/SearchBox.tsx b/packages/react-instantsearch-hooks-web/src/ui/SearchBox.tsx
index 399b5395ef..e270fd4dda 100644
--- a/packages/react-instantsearch-hooks-web/src/ui/SearchBox.tsx
+++ b/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)}
diff --git a/packages/react-instantsearch-hooks-web/src/ui/__tests__/SearchBox.test.tsx b/packages/react-instantsearch-hooks-web/src/ui/__tests__/SearchBox.test.tsx
index 57d044a258..20e6a47d23 100644
--- a/packages/react-instantsearch-hooks-web/src/ui/__tests__/SearchBox.test.tsx
+++ b/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' });
 
diff --git a/packages/react-instantsearch-hooks-web/src/widgets/SearchBox.tsx b/packages/react-instantsearch-hooks-web/src/widgets/SearchBox.tsx
index 04d8682215..f46b2dea00 100644
--- a/packages/react-instantsearch-hooks-web/src/widgets/SearchBox.tsx
+++ b/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 & {
     /**
diff --git a/packages/react-instantsearch-hooks-web/src/widgets/__tests__/SearchBox.test.tsx b/packages/react-instantsearch-hooks-web/src/widgets/__tests__/SearchBox.test.tsx
index 6a2b10c34b..6be1393117 100644
--- a/packages/react-instantsearch-hooks-web/src/widgets/__tests__/SearchBox.test.tsx
+++ b/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 = {};