From 4510686b9f2bfd9cc5680965185931806a159823 Mon Sep 17 00:00:00 2001
From: Denys Bohdan <denys_bohdan@epam.com>
Date: Tue, 7 Nov 2023 15:18:43 +0100
Subject: [PATCH] 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 (
     <PersistedPaneset
       appId={namespace}
@@ -160,10 +167,11 @@ const BrowseInventory = () => {
             selectedIndex={searchIndex}
             searchableIndexesPlaceholder={searchableIndexesPlaceholder}
             inputType="textarea"
+            inputRef={inputRef}
           />
 
           <ResetButton
-            reset={resetFilters}
+            reset={onReset}
             disabled={isResetButtonDisabled}
           />
 
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();
+    });
+  });
 });