Filename parameter ignored?

[dandrei]

I'm trying to specify the filename for the downloaded file, like this:

<MUIDataTable options={{
                downloadOptions: {
                    filename: "data.csv",
                    separator: ","
                }, ...etc

Expected Behavior

When clicking the download icon, it should download a file with the name data.csv

Current Behavior

It downloads a file with no .csv extension and a random filename (e.g. b72e74ab-41e5-4e54-8b3f-f46bf9fd1de4);

Is this a bug or am I doing something wrong? Thanks!

Tech	Version
Material-UI	4.6.1
MUI-datatables	2.12.2
React	16.12.0
browser	Chrome 32bit Windows v78.0.3904.97

[gabrielliwerant]

Hey @dandrei. Well, it's definitely not supposed to do that, but I'm having difficulty reproducing the issue on my end. It seems to work for me. Can you open a codesandbox repo that demonstrates the issue?

[dandrei]

Thanks @gabrielliwerant, I dug into this and this seems to be a weird interaction with Google Tag Manager (GTM). Namely, when GTM is injected into the page, it alters certain elements to be able to track them, and this breaks the download functionality for mui-datatables.

Does it use a FORM element under the hood to trigger the download? FORM is one of the elements altered by GTM.

I am unable to replicate the issue publicly, because the GTM code only runs on sites it's configured for, so won't run on CodeSandbox.

[patorjk]

You can see how the download stuff works here: https://github.com/gregnb/mui-datatables/blob/master/src/utils.js

The library creates a link and then clicks on it. My guess is GTM is altering the "download" attribute of links.

[mattvieten12]

@dandrei You're a life saver. Google Tag Manager was overriding the datatable's downloadOptions. After I removed the GTM code it fixed the issue with not only the name of the file (before it was the random filename) but also downloaded as .csv consistently on Windows.