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) 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 {