fix(Autocomplete): remove handler to open menu on focus (#3033)

* fix(Autocomplete): remove handler to open menu on focus * Create good-donuts-obey.md * chore: fix test
aws-amplify · Nov 21, 2022 · c9f67b1 · c9f67b1
1 parent ad433da
commit c9f67b1
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 26 deletions.
diff --git a/.changeset/good-donuts-obey.md b/.changeset/good-donuts-obey.md
@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+fix(Autocomplete): remove handler to open menu on focus to fix #3030
diff --git a/packages/react/src/primitives/Autocomplete/Autocomplete.tsx b/packages/react/src/primitives/Autocomplete/Autocomplete.tsx
@@ -29,7 +29,6 @@ export const AutocompletePrimitive: Primitive<AutocompleteProps, 'input'> = (
     onChange,
     onClear,
     onClick,
-    onFocus,
     onSelect,
     onSubmit,
     renderOption,
@@ -46,7 +45,6 @@ export const AutocompletePrimitive: Primitive<AutocompleteProps, 'input'> = (
     handleOnBlur,
     handleOnClear,
     handleOnClick,
-    handleOnFocus,
     handleOnChange,
     handleOnKeyDown,
     isControlled,
@@ -67,7 +65,6 @@ export const AutocompletePrimitive: Primitive<AutocompleteProps, 'input'> = (
     onChange,
     onClear,
     onClick,
-    onFocus,
     onSelect,
     onSubmit,
   });
@@ -145,7 +142,6 @@ export const AutocompletePrimitive: Primitive<AutocompleteProps, 'input'> = (
         onChange={handleOnChange}
         onClear={handleOnClear}
         onClick={handleOnClick}
-        onFocus={handleOnFocus}
         onKeyDown={handleOnKeyDown}
         ref={ref}
         value={composedValue}

diff --git a/packages/react/src/primitives/Autocomplete/__tests__/Autocomplete.test.tsx b/packages/react/src/primitives/Autocomplete/__tests__/Autocomplete.test.tsx
@@ -65,6 +65,13 @@ describe('Autocomplete: ', () => {
     userEvent.keyboard('{Esc}');
     expect(textInput).toHaveValue('');
 
+    // Focus will not open menu
+    userEvent.click(document.body);
+    expect(textInput).not.toHaveFocus();
+    textInput.focus();
+    expect(textInput).toHaveFocus();
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+
     // Click will open menu
     expect(textInput).toHaveFocus();
     userEvent.click(textInput);
@@ -188,7 +195,7 @@ describe('Autocomplete: ', () => {
     render(<Autocomplete label={label} options={options} isLoading />);
 
     const textInput = await screen.findByRole('combobox');
-    textInput.focus();
+    userEvent.click(textInput);
     const listbox = screen.queryByRole('listbox');
     expect(listbox).not.toBeInTheDocument();
     const loading = screen.getByText(ComponentText.Autocomplete.loadingText);
@@ -199,7 +206,7 @@ describe('Autocomplete: ', () => {
     render(<Autocomplete label={label} options={options} />);
 
     const textInput = await screen.findByRole('combobox');
-    textInput.focus();
+    userEvent.click(textInput);
 
     const appleOption = screen.getByText('apple')
       .parentElement as HTMLLIElement;
@@ -296,7 +303,7 @@ describe('Autocomplete: ', () => {
     );
 
     const textInput = await screen.findByRole('combobox');
-    textInput.focus();
+    userEvent.click(textInput);
     expect(renderOption).toHaveBeenCalled();
   });
 
@@ -312,7 +319,7 @@ describe('Autocomplete: ', () => {
     );
 
     const textInput = await screen.findByRole('combobox');
-    textInput.focus();
+    userEvent.click(textInput);
 
     const loading = screen.getByText(LoadingIndicator);
     expect(loading).toBeInTheDocument();
@@ -324,7 +331,7 @@ describe('Autocomplete: ', () => {
     render(<Autocomplete label={label} options={[]} menuSlots={{ Empty }} />);
 
     const textInput = await screen.findByRole('combobox');
-    textInput.focus();
+    userEvent.click(textInput);
 
     const empty = screen.getByText(Empty);
     expect(empty).toBeInTheDocument();
@@ -343,7 +350,7 @@ describe('Autocomplete: ', () => {
     );
 
     const textInput = await screen.findByRole('combobox');
-    textInput.focus();
+    userEvent.click(textInput);
 
     const header = screen.getByText(Header);
     expect(header).toBeInTheDocument();
@@ -362,7 +369,7 @@ describe('Autocomplete: ', () => {
     expect(textInput).toHaveAttribute('aria-haspopup', 'listbox');
     expect(textInput).toHaveAttribute('aria-expanded', 'false');
 
-    textInput.focus();
+    userEvent.click(textInput);
     const menu = screen.getByRole('listbox').parentElement;
     expect(textInput).toHaveAttribute('aria-expanded', 'true');
     expect(textInput).toHaveAttribute('aria-controls', menu?.id);

diff --git a/packages/react/src/primitives/Autocomplete/useAutocomplete.tsx b/packages/react/src/primitives/Autocomplete/useAutocomplete.tsx
@@ -21,7 +21,6 @@ export const useAutocomplete = ({
   onChange,
   onClear,
   onClick,
-  onFocus,
   onSelect,
   onSubmit,
 }: UseAutocompleteProps) => {
@@ -105,17 +104,6 @@ export const useAutocomplete = ({
       [onClick]
     );
 
-  const handleOnFocus: React.FocusEventHandler<HTMLInputElement> =
-    React.useCallback(
-      (event) => {
-        setIsMenuOpen(true);
-        if (isFunction(onFocus)) {
-          onFocus(event);
-        }
-      },
-      [onFocus]
-    );
-
   const handleOnKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (
     event
   ) => {
@@ -241,7 +229,6 @@ export const useAutocomplete = ({
     handleOnBlur,
     handleOnClear,
     handleOnClick,
-    handleOnFocus,
     handleOnChange,
     handleOnKeyDown,
     isControlled,

diff --git a/packages/react/src/primitives/types/autocomplete.ts b/packages/react/src/primitives/types/autocomplete.ts
@@ -143,6 +143,4 @@ export interface UseAutocompleteProps extends Partial<AutocompleteProps> {
   onChange: React.ChangeEventHandler<HTMLInputElement>;
 
   onClick: React.MouseEventHandler<HTMLInputElement>;
-
-  onFocus: React.FocusEventHandler<HTMLInputElement>;
 }