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

CHANGELOG.md

@@ -81,6 +81,7 @@ UIIN-3437.
 * Escape backslashes in Classification and Item Call number browse to search redirect links. Refs UIIN-3552.
 * ECS | Display item data when user tries to open it from another tenant in the new tab. Fixes UIIN-3528.
 * *BREAKING* Replace dependency on `mod-configuration` with `mod-settings`. Refs UIIN-3219.
+* Focus on the Close Instance pane button when returning from MARC edit/create/derive page. Fixes UIIN-3570.
 
 ## [13.0.10](https://github.com/folio-org/ui-inventory/tree/v13.0.10) (2025-09-01)
 [Full Changelog](https://github.com/folio-org/ui-inventory/compare/v13.0.9...v13.0.10)

src/Instance/ViewInstance/ViewInstance.js

@@ -89,6 +89,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;
@@ -171,10 +172,14 @@ const ViewInstanceComponent = (props) => {
   }, [stripes.user?.user?.tenants]);
 
   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, focusTitleOnInstanceLoad, isCentralTenantPermissionsLoading]);
+  }, [isLoading, instance, focusTitleOnInstanceLoad, isCentralTenantPermissionsLoading, location.state?.isClosingFocused]);
 
   const {
     isItemsMovement,
@@ -345,6 +350,7 @@ const ViewInstanceComponent = (props) => {
         isInstanceSharing={isInstanceSharing}
         holdingsSection={holdingsSection}
         paneTitleRef={paneTitleRef}
+        closeButtonRef={closeButtonRef}
         userTenantPermissions={userTenantPermissions}
         accordionStatusRef={accordionStatusRef}
         isRecordImporting={isImporting}

src/Instance/ViewInstance/ViewInstance.test.js

@@ -11,7 +11,9 @@ import { ViewInstance } from './index';
 
 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 {
@@ -64,13 +61,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();
@@ -185,9 +182,9 @@ const ViewInstancePane = ({
         actionMenu={actionMenu}
         firstMenu={(
           <PaneCloseLink
-            autoFocus={location.state?.isClosingFocused}
             onClick={onClose}
             aria-label={intl.formatMessage({ id: 'stripes-components.closeItem' }, { item: paneTitle })}
+            closeButtonRef={closeButtonRef}
           />
         )}
         defaultWidth="fill"
@@ -243,6 +240,7 @@ ViewInstancePane.propTypes = {
   isInstanceSharing: PropTypes.bool,
   holdingsSection: PropTypes.node,
   paneTitleRef: PropTypes.object,
+  closeButtonRef: PropTypes.object,
   accordionStatusRef: PropTypes.object,
   isRecordImporting: PropTypes.bool
 };