From c786b2e22b1541787f9234cf4aaf5271e6e23349 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)

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

(cherry picked from commit 45756bb649200dab61daa5feea336d0ced9806fe)
---
 CHANGELOG.md                 |  4 ++++
 lib/ExportCsv/exportToCsv.js | 11 +++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7b0b4ce4f..bd474fcd8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Change history for stripes-components
 
+## 12.2.8 IN PROGRESS
+
+* ExportCSV - fix usage within `<Modal>`s by rendering the download link to the `div#OverlayContainer`. Refs STCOM-1387.
+
 ## [12.2.7](https://github.com/folio-org/stripes-components/tree/v12.2.7) (2024-12-02)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.2.6...v12.2.7)
 
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 {