UIIN-2514 Reset all should shift focus back to search box

folio-org · Nov 7, 2023 · dbdf65e · dbdf65e
1 parent 50f2b95
commit dbdf65e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git 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
@@ -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}