From dbdf65eb306a236b5a40e0d250cd0cc124e2114d Mon Sep 17 00:00:00 2001 From: Denys Bohdan Date: Tue, 7 Nov 2023 12:27:22 +0100 Subject: [PATCH 1/4] UIIN-2514 Reset all should shift focus back to search box --- CHANGELOG.md | 1 + src/components/InstancesList/InstancesList.js | 11 +++++++++-- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c491c44f8..ae3b0172d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ * Make Inventory search and browse query boxes expandable. Refs UIIN-2493. * Added support for `containsAny` match option in Advanced search. Refs UIIN-2486. * Inventory search/browse: Do not retain checkbox selections when toggling search segment. Refs UIIN-2477. +* Search box/Browse box- Reset all should shift focus back to search box. Refs UIIN-2514. ## [10.0.3] IN PROGRESS diff --git a/src/components/InstancesList/InstancesList.js b/src/components/InstancesList/InstancesList.js index 83dce4f6b..0dd5d3d23 100644 --- a/src/components/InstancesList/InstancesList.js +++ b/src/components/InstancesList/InstancesList.js @@ -173,6 +173,7 @@ class InstancesList extends React.Component { }; } + componentDidMount() { const { history, @@ -185,7 +186,7 @@ class InstancesList extends React.Component { if (hasReset) { // imperative way is used because it's no option in SearchAndSort reset/focus filters from outside document.getElementById('clickable-reset-all')?.click(); - document.getElementById('input-inventory-search')?.focus(); + this.inputRef.current.focus(); history.replace({ search: 'segment=instances' }); } @@ -222,6 +223,9 @@ class InstancesList extends React.Component { parentMutator.records.reset(); } + inputRef = React.createRef(); + indexRef = React.createRef(); + extraParamsToReset = { selectedBrowseResult: false, authorityId: '', @@ -390,7 +394,7 @@ class InstancesList extends React.Component { // https://issues.folio.org/browse/UIIN-1358 storeLastSegment(segment); facetsStore.getState().resetFacetSettings(); - document.getElementById('input-inventory-search').focus(); + this.inputRef.current.focus(); } handleSearchSegmentChange = (segment) => { @@ -903,6 +907,7 @@ class InstancesList extends React.Component { }); facetsStore.getState().resetFacetSettings(); + this.inputRef.current.focus(); } handleSelectedRecordsModalSave = selectedRecords => { @@ -1184,6 +1189,8 @@ class InstancesList extends React.Component { initialResultCount={INITIAL_RESULT_COUNT} initiallySelectedRecord={getItem(`${namespace}.${segment}.lastOpenRecord`)} inputType="textarea" + inputRef={this.inputRef} + indexRef={this.indexRef} resultCountIncrement={RESULT_COUNT_INCREMENT} viewRecordComponent={ViewInstanceWrapper} editRecordComponent={InstanceForm} From 3f44a389147865977736057da475d949960b7ba4 Mon Sep 17 00:00:00 2001 From: Denys Bohdan Date: Tue, 7 Nov 2023 15:18:43 +0100 Subject: [PATCH 2/4] UIIN-2514 Reset all will move focus to input in Browse --- .../InstancesList/InstancesList.test.js | 20 ++++++++++++++++--- src/views/BrowseInventory/BrowseInventory.js | 12 +++++++++-- .../BrowseInventory/BrowseInventory.test.js | 13 ++++++++++++ 3 files changed, 40 insertions(+), 5 deletions(-) diff --git a/src/components/InstancesList/InstancesList.test.js b/src/components/InstancesList/InstancesList.test.js index cb1324a32..85e4a7bbd 100644 --- a/src/components/InstancesList/InstancesList.test.js +++ b/src/components/InstancesList/InstancesList.test.js @@ -221,6 +221,20 @@ describe('InstancesList', () => { }); }); + describe('when user clicks Reset all', () => { + it('should move focus to query input', () => { + renderInstancesList({ + segment: 'instances', + }); + + fireEvent.change(screen.getByRole('textbox', { name: 'Search' }), { target: { value: 'test' } }); + fireEvent.click(screen.getAllByRole('button', { name: 'Search' })[1]); + fireEvent.click(screen.getByRole('button', { name: 'Reset all' })); + + expect(screen.getByRole('textbox', { name: 'Search' })).toHaveFocus(); + }); + }); + describe('when search segment is changed', () => { it('should clear selected rows', () => { const { @@ -490,7 +504,7 @@ describe('InstancesList', () => { renderInstancesList({ segment: 'instances' }); fireEvent.click(screen.getByRole('button', { name: 'Advanced search' })); - fireEvent.change(screen.getAllByRole('textbox', { name: 'Search for' })[0], { + indexRef(screen.getAllByRole('textbox', { name: 'Search for' })[0], { target: { value: 'test2' } }); const advancedSearchSubmit = screen.getAllByRole('button', { name: 'Search' })[0]; @@ -515,7 +529,7 @@ describe('InstancesList', () => { renderInstancesList({ segment: 'instances' }); fireEvent.click(screen.getByRole('button', { name: 'Advanced search' })); - fireEvent.change(screen.getAllByRole('textbox', { name: 'Search for' })[0], { + indexRef(screen.getAllByRole('textbox', { name: 'Search for' })[0], { target: { value: 'test' } }); @@ -531,7 +545,7 @@ describe('InstancesList', () => { it('should show Save Holdings UUIDs button', () => { renderInstancesList({ segment: 'holdings' }); - fireEvent.change(screen.getByRole('combobox'), { + indexRef(screen.getByRole('combobox'), { target: { value: 'all' } }); diff --git a/src/views/BrowseInventory/BrowseInventory.js b/src/views/BrowseInventory/BrowseInventory.js index ec2339cad..ef35e3afb 100644 --- a/src/views/BrowseInventory/BrowseInventory.js +++ b/src/views/BrowseInventory/BrowseInventory.js @@ -1,4 +1,4 @@ -import React, { useCallback, useState, useEffect, useMemo } from 'react'; +import React, { useCallback, useState, useEffect, useMemo, useRef } from 'react'; import { useIntl } from 'react-intl'; import { useHistory, useLocation } from 'react-router-dom'; @@ -46,6 +46,8 @@ const BrowseInventory = () => { const { isFiltersOpened, toggleFilters } = useFiltersToogle(`${namespace}/filters`); const { deleteItemToView } = useItemToView('browse'); const [pageConfig, setPageConfig] = useState(getLastBrowseOffset()); + const inputRef = useRef(); + const { search } = location; useEffect(() => { @@ -134,6 +136,11 @@ const BrowseInventory = () => { changeSearchIndex(e); }, []); + const onReset = useCallback(() => { + resetFilters(); + inputRef.current.focus(); + }, [inputRef.current]); + return ( { selectedIndex={searchIndex} searchableIndexesPlaceholder={searchableIndexesPlaceholder} inputType="textarea" + inputRef={inputRef} /> diff --git a/src/views/BrowseInventory/BrowseInventory.test.js b/src/views/BrowseInventory/BrowseInventory.test.js index 5d21850cb..f6e1ab912 100644 --- a/src/views/BrowseInventory/BrowseInventory.test.js +++ b/src/views/BrowseInventory/BrowseInventory.test.js @@ -216,4 +216,17 @@ describe('BrowseInventory', () => { expect(getByText('Contributors')).toBeDefined(); expect(getByText('Subjects')).toBeDefined(); }); + + describe('when user clicks on Reset all', () => { + it('should move focus to query input', () => { + renderBrowseInventory(); + + fireEvent.change(screen.getByRole('combobox'), { target: { value: 'contributors' } }); + userEvent.type(screen.getByRole('textbox'), 'test') + fireEvent.click(screen.getByRole('button', { name: 'Search' })); + fireEvent.click(screen.getByRole('button', { name: 'Reset all' })); + + expect(screen.getByRole('textbox')).toHaveFocus(); + }); + }); }); From 12309e7f1d35d99b1704d19c54ba164e003bf938 Mon Sep 17 00:00:00 2001 From: Denys Bohdan Date: Tue, 7 Nov 2023 16:21:11 +0100 Subject: [PATCH 3/4] UIIN-2514 Fix eslint error --- src/views/BrowseInventory/BrowseInventory.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/BrowseInventory/BrowseInventory.test.js b/src/views/BrowseInventory/BrowseInventory.test.js index f6e1ab912..be529e460 100644 --- a/src/views/BrowseInventory/BrowseInventory.test.js +++ b/src/views/BrowseInventory/BrowseInventory.test.js @@ -222,7 +222,7 @@ describe('BrowseInventory', () => { renderBrowseInventory(); fireEvent.change(screen.getByRole('combobox'), { target: { value: 'contributors' } }); - userEvent.type(screen.getByRole('textbox'), 'test') + userEvent.type(screen.getByRole('textbox'), 'test'); fireEvent.click(screen.getByRole('button', { name: 'Search' })); fireEvent.click(screen.getByRole('button', { name: 'Reset all' })); From bd00baaf150d74f5712202013c4b81d3fa6c170d Mon Sep 17 00:00:00 2001 From: Denys Bohdan Date: Wed, 8 Nov 2023 11:18:29 +0100 Subject: [PATCH 4/4] UIIN-2514 Fix tests --- src/components/InstancesList/InstancesList.test.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/InstancesList/InstancesList.test.js b/src/components/InstancesList/InstancesList.test.js index 774b31732..9e5914712 100644 --- a/src/components/InstancesList/InstancesList.test.js +++ b/src/components/InstancesList/InstancesList.test.js @@ -541,7 +541,7 @@ describe('InstancesList', () => { renderInstancesList({ segment: 'instances' }); fireEvent.click(screen.getByRole('button', { name: 'Advanced search' })); - indexRef(screen.getAllByRole('textbox', { name: 'Search for' })[0], { + fireEvent.change(screen.getAllByRole('textbox', { name: 'Search for' })[0], { target: { value: 'test2' } }); const advancedSearchSubmit = screen.getAllByRole('button', { name: 'Search' })[0]; @@ -566,7 +566,7 @@ describe('InstancesList', () => { renderInstancesList({ segment: 'instances' }); fireEvent.click(screen.getByRole('button', { name: 'Advanced search' })); - indexRef(screen.getAllByRole('textbox', { name: 'Search for' })[0], { + fireEvent.change(screen.getAllByRole('textbox', { name: 'Search for' })[0], { target: { value: 'test' } }); @@ -582,7 +582,7 @@ describe('InstancesList', () => { it('should show Save Holdings UUIDs button', () => { renderInstancesList({ segment: 'holdings' }); - indexRef(screen.getByRole('combobox'), { + fireEvent.change(screen.getByRole('combobox'), { target: { value: 'all' } });