From c9f67b1b00f70419b4d623ecb282b5452bd67e15 Mon Sep 17 00:00:00 2001 From: Chenwei Zhang <40295569+zchenwei@users.noreply.github.com> Date: Sun, 20 Nov 2022 17:26:48 -0800 Subject: [PATCH] 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 --- .changeset/good-donuts-obey.md | 5 +++++ .../primitives/Autocomplete/Autocomplete.tsx | 4 ---- .../__tests__/Autocomplete.test.tsx | 21 ++++++++++++------- .../Autocomplete/useAutocomplete.tsx | 13 ------------ .../src/primitives/types/autocomplete.ts | 2 -- 5 files changed, 19 insertions(+), 26 deletions(-) create mode 100644 .changeset/good-donuts-obey.md diff --git a/.changeset/good-donuts-obey.md b/.changeset/good-donuts-obey.md new file mode 100644 index 0000000000..3646fdf580 --- /dev/null +++ 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 index 34a278f5f0..a3db05927c 100644 --- a/packages/react/src/primitives/Autocomplete/Autocomplete.tsx +++ b/packages/react/src/primitives/Autocomplete/Autocomplete.tsx @@ -29,7 +29,6 @@ export const AutocompletePrimitive: Primitive = ( onChange, onClear, onClick, - onFocus, onSelect, onSubmit, renderOption, @@ -46,7 +45,6 @@ export const AutocompletePrimitive: Primitive = ( handleOnBlur, handleOnClear, handleOnClick, - handleOnFocus, handleOnChange, handleOnKeyDown, isControlled, @@ -67,7 +65,6 @@ export const AutocompletePrimitive: Primitive = ( onChange, onClear, onClick, - onFocus, onSelect, onSubmit, }); @@ -145,7 +142,6 @@ export const AutocompletePrimitive: Primitive = ( 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 index d216ca93c8..eee652a874 100644 --- 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(); 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(); 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(); 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 index 675e4dfd82..fe14598432 100644 --- 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 = - React.useCallback( - (event) => { - setIsMenuOpen(true); - if (isFunction(onFocus)) { - onFocus(event); - } - }, - [onFocus] - ); - const handleOnKeyDown: React.KeyboardEventHandler = ( 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 index 638f7f92b5..661dea56dd 100644 --- 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 { onChange: React.ChangeEventHandler; onClick: React.MouseEventHandler; - - onFocus: React.FocusEventHandler; }