Skip to content

Commit

Permalink
STCOM-1387 ExportCSV download link not working in Modals (#2400)
Browse files Browse the repository at this point in the history
## [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:
folio-org/stripes-util#91
  • Loading branch information
JohnC-80 authored and github-actions committed Dec 3, 2024
1 parent f60decd commit 755d0ca
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 2 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
11 changes: 9 additions & 2 deletions lib/ExportCsv/exportToCsv.js
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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 {
Expand Down

0 comments on commit 755d0ca

Please sign in to comment.