UIIN-2514: Search box/Browse box- Reset all should shift focus back to search box

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
 

src/components/InstancesList/InstancesList.js

@@ -173,6 +173,7 @@
     };
   }
 
+
   componentDidMount() {
     const {
       history,
@@ -185,7 +186,7 @@
       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 @@
     parentMutator.records.reset();
   }
 
+  inputRef = React.createRef();
+  indexRef = React.createRef();
+
   extraParamsToReset = {
     selectedBrowseResult: false,
     authorityId: '',
@@ -390,7 +394,7 @@
     // https://issues.folio.org/browse/UIIN-1358
     storeLastSegment(segment);
     facetsStore.getState().resetFacetSettings();
-    document.getElementById('input-inventory-search').focus();
+    this.inputRef.current.focus();
   }
 
   handleSearchSegmentChange = (segment) => {
@@ -645,7 +649,7 @@
   setSegmentSortBy = (sortBy) => {
     const { segment } = this.props;
 
     const segmentsSortBy = this.state.segmentsSortBy.map((key) => {
       if (key.name === segment) {
         key.sort = sortBy;
         return key;
@@ -915,6 +919,7 @@
     });
 
     facetsStore.getState().resetFacetSettings();
+    this.inputRef.current.focus();
   }
 
   handleSelectedRecordsModalSave = selectedRecords => {
@@ -1196,6 +1201,8 @@
             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}

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 {

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 (
     <PersistedPaneset
       appId={namespace}
@@ -160,10 +167,11 @@ const BrowseInventory = () => {
             selectedIndex={searchIndex}
             searchableIndexesPlaceholder={searchableIndexesPlaceholder}
             inputType="textarea"
+            inputRef={inputRef}
           />
 
           <ResetButton
-            reset={resetFilters}
+            reset={onReset}
             disabled={isResetButtonDisabled}
           />
 

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();
+    });
+  });
 });