UIQM-728 Keep focus on last focused element when user cancels on conf…

…irmation modals. (#767)

* UIQM-728 Keep focus on last focused element when user cancels on confirmation modals.

* UIQM-728 Remove re-focus last focused element logic for unlink fields confirmation

CHANGELOG.md

@@ -5,6 +5,7 @@
 * [UIQM-716](https://issues.folio.org/browse/UIQM-716) *BREAKING* Consolidate routes based on MARC type for bib and authority records to avoid page refresh after redirecting from the create page to the edit one.
 * [UIQM-730](https://issues.folio.org/browse/UIQM-730) Create/Edit/Derive MARC record - Retain focus when MARC record validation rules error display. Show validation issues toasts.
 * [UIQM-740](https://issues.folio.org/browse/UIQM-740) Don't show warn/fail error toasts when there are no warns/fails.
+* [UIQM-728](https://issues.folio.org/browse/UIQM-728) Keep focus on last focused element when user cancels on confirmation modals.
 
 ## [9.0.2] (IN PROGRESS)
 

src/QuickMarcEditor/QuickMarcEditor.js

@@ -447,6 +447,9 @@ const QuickMarcEditor = ({
 
   const cancelUpdateLinks = () => {
     setIsUpdate0101xxfieldsAuthRecModalOpen(false);
+    setTimeout(() => {
+      focusLastFocusedInput();
+    });
   };
 
   const confirmUpdateLinks = async (e) => {
@@ -461,13 +464,16 @@ const QuickMarcEditor = ({
   };
 
   const cancelDeleteFields = () => {
-    setIsDeleteModalOpened(false);
-
     if (deletedRecords.length) {
       restoreDeletedRecords();
     } else {
       reset();
     }
+
+    setIsDeleteModalOpened(false);
+    setTimeout(() => {
+      focusLastFocusedInput();
+    });
   };
 
   const cancelRemoveLinking = () => {

src/QuickMarcEditor/QuickMarcEditor.test.js

@@ -135,6 +135,12 @@ const initialValues = {
       indicators: ['2', '\\'],
       id: 'test-id-1',
     },
+    {
+      tag: '999',
+      content: '',
+      indicators: ['f', 'f'],
+      id: '999',
+    },
   ],
 };
 
@@ -764,7 +770,7 @@ describe('Given QuickMarcEditor', () => {
     });
 
     describe('when click Cancel', () => {
-      it('should hide ConfirmationModal and restore deleted fields', async () => {
+      beforeEach(async () => {
         const {
           getAllByRole,
           getByText,
@@ -780,10 +786,21 @@ describe('Given QuickMarcEditor', () => {
 
         await act(async () => fireEvent.click(getByText('stripes-acq-components.FormFooter.save')));
         await fireEvent.click(getByText('Cancel'));
+      });
 
+      it('should hide ConfirmationModal and restore deleted fields', async () => {
         await waitFor(() => {
-          expect(queryByText('Confirmation modal')).toBeNull();
-          expect(getByText('$a Test title')).toBeDefined();
+          expect(screen.queryByText('Confirmation modal')).toBeNull();
+          expect(screen.getByText('$a Test title')).toBeDefined();
+        });
+      });
+
+      it('should keep focus on the last focused element', async () => {
+        const moveUpButtons = screen.getAllByRole('button', { name: 'ui-quick-marc.record.moveUpRow' });
+
+        await waitFor(() => {
+          expect(screen.getByText('$a Test title')).toBeDefined();
+          expect(moveUpButtons[moveUpButtons.length - 1]).toHaveFocus();
         });
       });
     });