diff --git a/CHANGELOG.md b/CHANGELOG.md index 18eeaadc1..9655041b5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ * 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. * Show Instance record after creating with Fast add option. Refs UIIN-2497. +* 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 7d0e67f4a..212574b75 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) => { @@ -915,6 +919,7 @@ class InstancesList extends React.Component { }); facetsStore.getState().resetFacetSettings(); + this.inputRef.current.focus(); } handleSelectedRecordsModalSave = selectedRecords => { @@ -1196,6 +1201,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} diff --git a/src/components/InstancesList/InstancesList.test.js b/src/components/InstancesList/InstancesList.test.js index fc4d6ffc2..9e5914712 100644 --- a/src/components/InstancesList/InstancesList.test.js +++ b/src/components/InstancesList/InstancesList.test.js @@ -231,6 +231,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 { 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..be529e460 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(); + }); + }); });