From af68a991c01e48606c316baa371484a62497d418 Mon Sep 17 00:00:00 2001 From: John Coburn Date: Mon, 2 Dec 2024 15:34:58 -0600 Subject: [PATCH 1/3] ExportCsv - render download link to the OverlayContainer rather than the body to conform to possible focus-trapping --- lib/ExportCsv/exportToCsv.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/lib/ExportCsv/exportToCsv.js b/lib/ExportCsv/exportToCsv.js index 49d471c87..536e843fe 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. + 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 { From 25096803ed2416b3ec23aeb6ce399c190c2ca194 Mon Sep 17 00:00:00 2001 From: John Coburn Date: Mon, 2 Dec 2024 15:36:23 -0600 Subject: [PATCH 2/3] log changes --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0e435b896..9fe823027 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ * Assign ``'s exit key handler to Modal's element rather than `document`. refs STCOM-1382. * Wrap ``'s render output in `` 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 ``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) From 7d0e79538e9dbed09ca2c9d31efad7011bd37be2 Mon Sep 17 00:00:00 2001 From: John Coburn Date: Mon, 2 Dec 2024 15:48:39 -0600 Subject: [PATCH 3/3] tweak comment --- lib/ExportCsv/exportToCsv.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/ExportCsv/exportToCsv.js b/lib/ExportCsv/exportToCsv.js index 536e843fe..e06e9616a 100644 --- a/lib/ExportCsv/exportToCsv.js +++ b/lib/ExportCsv/exportToCsv.js @@ -19,7 +19,7 @@ function triggerDownload(csv, fileTitle) { link.style.visibility = 'hidden'; // 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. + // 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