From f51675d4978199e414332da1aaab4ffb5f29d16b Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Thu, 2 Feb 2023 16:32:18 -0600 Subject: [PATCH 1/3] fix to clear selected item if field is cleared --- .../autocomplete/src/useSearchAutocomplete.ts | 1 + .../test/SearchAutocomplete.test.js | 37 +++++++++++++++++++ 2 files changed, 38 insertions(+) diff --git a/packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts b/packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts index 9ee4fbef1a8..663753ed00c 100644 --- a/packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts +++ b/packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts @@ -66,6 +66,7 @@ export function useSearchAutocomplete(props: AriaSearchAutocompleteProps, autoComplete: 'off', onClear: () => { state.setInputValue(''); + state.setSelectedKey(null); if (onClear) { onClear(); } diff --git a/packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js b/packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js index 41dae92aa3d..6b13874d534 100644 --- a/packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js +++ b/packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js @@ -816,6 +816,43 @@ describe('SearchAutocomplete', function () { expect(items).toHaveLength(1); expect(searchAutocomplete).not.toHaveAttribute('aria-activedescendant'); }); + + it('should clear the selected item if searchfield is cleared', function () { + let {getByRole} = renderSearchAutocomplete(); + + let searchAutocomplete = getByRole('combobox'); + typeText(searchAutocomplete, 'one'); + + act(() => { + jest.runAllTimers(); + }); + + let listbox = getByRole('listbox'); + let items = within(listbox).getAllByRole('option'); + expect(items).toHaveLength(1); + expect(searchAutocomplete).not.toHaveAttribute('aria-activedescendant'); + + act(() => { + fireEvent.keyDown(searchAutocomplete, {key: 'ArrowDown'}); + fireEvent.keyUp(searchAutocomplete, {key: 'ArrowDown'}); + fireEvent.keyDown(searchAutocomplete, {key: 'Enter'}); + fireEvent.keyUp(searchAutocomplete, {key: 'Enter'}); + }); + + act(() => { + jest.runAllTimers(); + }); + + expect(searchAutocomplete.value).toBe('One'); + + act(() => { + fireEvent.keyDown(searchAutocomplete, {key: 'Esc'}); + fireEvent.keyUp(searchAutocomplete, {key: 'Esc'}); + }); + + expect(searchAutocomplete.value).toBe(''); + expect(onClear).toHaveBeenCalledTimes(1); + }); }); describe('blur', function () { From d7d3bb9b3b986f9bcb5c2539ccf51f165538f48a Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Thu, 2 Feb 2023 16:43:34 -0600 Subject: [PATCH 2/3] lint --- packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts b/packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts index 663753ed00c..6f5eee00a10 100644 --- a/packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts +++ b/packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts @@ -66,7 +66,7 @@ export function useSearchAutocomplete(props: AriaSearchAutocompleteProps, autoComplete: 'off', onClear: () => { state.setInputValue(''); - state.setSelectedKey(null); + state.selectionManager.setSelectedKeys(new Set()); if (onClear) { onClear(); } From 138e0fe1f0243160d169148e41a9500080dcd5f5 Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Thu, 2 Feb 2023 17:31:37 -0600 Subject: [PATCH 3/3] remove acts --- .../test/SearchAutocomplete.test.js | 24 +++++-------------- 1 file changed, 6 insertions(+), 18 deletions(-) diff --git a/packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js b/packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js index 6b13874d534..b6948d3b968 100644 --- a/packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js +++ b/packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js @@ -823,32 +823,20 @@ describe('SearchAutocomplete', function () { let searchAutocomplete = getByRole('combobox'); typeText(searchAutocomplete, 'one'); - act(() => { - jest.runAllTimers(); - }); - let listbox = getByRole('listbox'); let items = within(listbox).getAllByRole('option'); expect(items).toHaveLength(1); expect(searchAutocomplete).not.toHaveAttribute('aria-activedescendant'); - act(() => { - fireEvent.keyDown(searchAutocomplete, {key: 'ArrowDown'}); - fireEvent.keyUp(searchAutocomplete, {key: 'ArrowDown'}); - fireEvent.keyDown(searchAutocomplete, {key: 'Enter'}); - fireEvent.keyUp(searchAutocomplete, {key: 'Enter'}); - }); - - act(() => { - jest.runAllTimers(); - }); + fireEvent.keyDown(searchAutocomplete, {key: 'ArrowDown'}); + fireEvent.keyUp(searchAutocomplete, {key: 'ArrowDown'}); + fireEvent.keyDown(searchAutocomplete, {key: 'Enter'}); + fireEvent.keyUp(searchAutocomplete, {key: 'Enter'}); expect(searchAutocomplete.value).toBe('One'); - act(() => { - fireEvent.keyDown(searchAutocomplete, {key: 'Esc'}); - fireEvent.keyUp(searchAutocomplete, {key: 'Esc'}); - }); + fireEvent.keyDown(searchAutocomplete, {key: 'Esc'}); + fireEvent.keyUp(searchAutocomplete, {key: 'Esc'}); expect(searchAutocomplete.value).toBe(''); expect(onClear).toHaveBeenCalledTimes(1);