From 755d0cacb2498e8e48308af979ae95876483c8a4 Mon Sep 17 00:00:00 2001
From: John Coburn <jcoburn@ebsco.com>
Date: Tue, 3 Dec 2024 08:17:53 -0600
Subject: [PATCH] STCOM-1387 ExportCSV download link not working in Modals
 (#2400)

## [STCOM-1387](https://folio-org.atlassian.net/browse/STCOM-1387)

The focus-trapping logic of Modal (via `focus-trap`) causes the
`click()` event not to trigger on the download link rendered by
`ExportCSV` because the link is appended outside of the focus-trapped
element (in the body.)

Approach:
Rendering the link within the `div#OverlayContainer` places it in within
the `focus-trapping` boundary. Since this element is always present in
the stripes UI, it's okay to render here. For tests where the
`OverlayContainer` may not exist, the logic falls back to the body.

Additionally, the `exportCSV` logic would simply click the link and then
remove it. This may not cause the focus to move, but it's a safe
accessibility measure to return focus to the element it was originally
on prior to clicking the download trigger.

A similar fix is required in `stripes-util` since we're not sure how
many ui modules use THAT version of `ExportCSV`... That PR:
https://github.com/folio-org/stripes-util/pull/91
---
 CHANGELOG.md                 |  1 +
 lib/ExportCsv/exportToCsv.js | 11 +++++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0e435b896..9fe823027 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@
 * Assign `<Modal>`'s exit key handler to Modal's element rather than `document`. refs STCOM-1382.
 * Wrap `<Card>`'s render output in `<StripesOverlayContext>` to facilitate ease with overlay components. Refs STCOM-1384.
 * Clear filter value after an action chosen from `MultiSelection` menu. Refs STCOM-1385.
+* ExportCSV - fix usage within `<Modal>`s by rendering the download link to the `div#OverlayContainer`. Refs STCOM-1387.
 
 ## [12.2.0](https://github.com/folio-org/stripes-components/tree/v12.2.0) (2024-10-11)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.1.0...v12.2.0)
diff --git a/lib/ExportCsv/exportToCsv.js b/lib/ExportCsv/exportToCsv.js
index 49d471c87..e06e9616a 100644
--- a/lib/ExportCsv/exportToCsv.js
+++ b/lib/ExportCsv/exportToCsv.js
@@ -1,4 +1,5 @@
 import { Parser } from 'json2csv';
+import { OVERLAY_CONTAINER_ID } from '../../util/consts';
 
 // Ignoring next block in tests since we don't have a great way to suppress downloads in tests
 // istanbul ignore next
@@ -16,12 +17,18 @@ function triggerDownload(csv, fileTitle) {
       link.setAttribute('data-test-exportcsv-link', 'true');
       link.setAttribute('download', exportedFilename);
       link.style.visibility = 'hidden';
-      document.body.appendChild(link);
+
+      // A download link is created within OverlayContainer element, falling back to the body.
+      // A click() on this element outside of the OverlayContainer will not be allowed while a Modal is open.
+      const linkContainer = document.getElementById(OVERLAY_CONTAINER_ID) || document.body;
+      linkContainer.appendChild(link);
       // prevent file downloading on testing env
       if (process.env.NODE_ENV !== 'test') {
         window.setTimeout(() => {
+          const currentFocused = document.activeElement;
           link.click();
-          document.body.removeChild(link);
+          currentFocused.focus();
+          linkContainer.removeChild(link);
         }, 50);
       }// Need to debounce this click event from others (Pane actionMenuItems dropdown)
     } else {