UIIN-3750 Focus on the Close Instance pane button when returning from MARC edit/create/derive page (#2948)

* UIIN-3750 Focus on the Close Instance pane button when returning from MARC edit/create/derive page

* UIIN-3570 fix test

* UIIN-3570 update branch with master

Author: BogdanDenis

CHANGELOG.md

@@ -116,6 +116,7 @@ UIIN-3437.
 * Fix items list data caching issues after remounting ViewInstanceDetails pane. Fixes UIIN-3627.
 * Update label references from "Linked data editor" to "Marigold". Refs UILD-771.
 * The "Action" button remains visible after opening "Version History" pane. Fixes UIIN-3629.
+* Focus on the Close Instance pane button when returning from MARC edit/create/derive page. Fixes UIIN-3570.
 
 ## [13.0.13](https://github.com/folio-org/ui-inventory/tree/v13.0.13) (2026-03-11)
 [Full Changelog](https://github.com/folio-org/ui-inventory/compare/v13.0.12...v13.0.13)

src/Instance/ViewInstance/ViewInstance.js

@@ -84,6 +84,7 @@ const ViewInstanceComponent = (props) => {
   const history = useHistory();
   const location = useLocation();
   const paneTitleRef = useRef(null);
+  const closeButtonRef = useRef(null);
   const accordionStatusRef = useRef();
 
   const centralTenantId = stripes.user.user?.consortium?.centralTenantId;
@@ -157,10 +158,14 @@ const ViewInstanceComponent = (props) => {
   }, [isTLRSettingsLoading, tlrSettings]);
 
   useEffect(() => {
-    if (!isLoading && instance?.id && focusTitleOnInstanceLoad && !isCentralTenantPermissionsLoading) {
-      paneTitleRef.current?.focus();
+    if (!isLoading && instance?.id && !isCentralTenantPermissionsLoading) {
+      if (location.state?.isClosingFocused) {
+        closeButtonRef.current?.focus();
+      } else if (focusTitleOnInstanceLoad) {
+        paneTitleRef.current?.focus();
+      }
     }
-  }, [isLoading, instance?.id, focusTitleOnInstanceLoad, isCentralTenantPermissionsLoading]);
+  }, [isLoading, instance, focusTitleOnInstanceLoad, isCentralTenantPermissionsLoading, location.state?.isClosingFocused]);
 
   const {
     isItemsMovement,
@@ -342,6 +347,7 @@ const ViewInstanceComponent = (props) => {
         isInstanceSharing={isInstanceSharing}
         holdingsSection={holdingsSection}
         paneTitleRef={paneTitleRef}
+        closeButtonRef={closeButtonRef}
         accordionStatusRef={accordionStatusRef}
         isRecordImporting={isImporting}
       />

src/Instance/ViewInstance/ViewInstance.test.js

@@ -12,7 +12,9 @@ import { getTlrSettings } from './ViewInstance';
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
-  useLocation: jest.fn(),
+  useLocation: jest.fn().mockReturnValue({
+    state: {},
+  }),
   useHistory: jest.fn(),
   useParams: jest.fn().mockReturnValue({ id: 'instance-id' }),
 }));

src/Instance/ViewInstance/ViewInstancePane/ViewInstancePane.js

@@ -6,10 +6,7 @@ import {
   FormattedMessage,
   useIntl,
 } from 'react-intl';
-import {
-  useLocation,
-  useParams,
-} from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 import {
@@ -63,13 +60,13 @@ const ViewInstancePane = ({
   isInstanceSharing = false,
   holdingsSection,
   paneTitleRef,
+  closeButtonRef,
   accordionStatusRef,
   isRecordImporting,
 }) => {
   const intl = useIntl();
   const stripes = useStripes();
   const { id: instanceId } = useParams();
-  const location = useLocation();
   const tags = instance?.tags?.tagList;
 
   const [helperApp, setHelperApp] = useState();
@@ -184,9 +181,9 @@ const ViewInstancePane = ({
         actionMenu={isVersionHistoryOpen ? null : actionMenu}
         firstMenu={(
           <PaneCloseLink
-            autoFocus={location.state?.isClosingFocused}
             onClick={onClose}
             aria-label={intl.formatMessage({ id: 'stripes-components.closeItem' }, { item: paneTitle })}
+            closeButtonRef={closeButtonRef}
           />
         )}
         defaultWidth="fill"
@@ -240,6 +237,7 @@ ViewInstancePane.propTypes = {
   isInstanceSharing: PropTypes.bool,
   holdingsSection: PropTypes.node,
   paneTitleRef: PropTypes.object,
+  closeButtonRef: PropTypes.object,
   accordionStatusRef: PropTypes.object,
   isRecordImporting: PropTypes.bool
 };