Data URL download does not work from a Dijit Button [SOLVED]

Dojo 1.x users
1

I encountered a problem in a large application after updating Firefox. In the application, I need to offer to users the possibility to download content generated on the client side. I therefore use “data:” URLs.

The Dojo button does not work in Firefox 60 or 63 if you click on it. It used to work perfectly in Firefox 52. I discovered that if you focus the button then trigger it with the ENTER key a few times, it will work. I also tried setting the “Content process limit” to 1 in the settings then restarted Firefox, but it did not change the behavior.

If I step through the code with the Debugger, it works correctly, but the debugger starts to misbehave after one execution; the breakpoint will be ignored after the first execution.

It is not clear to me if this is a Firefox issue or a Dojo issue. The problem arises of the combination of both. The behaviour is exactly the same in Chromium 65. This leads me to think it’s a Dojo issue rather than a Firefox issue. I also tested in Firefox under Windows and it behaved the same way.

I built an example that reproduces the issue:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <style type="text/css">
        @import "//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css";
    </style>
</head>
<body class="claro">
    <span id="dojoBtn">Save CSV</span>
    <button id="htmlBtn">Save CSV</button>
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
        data-dojo-config="async: true"></script>
    <script>
        var tabularData = [];
        for (let i = 0; i < 42; i++) {
            tabularData.push({x:i, y:Math.random()})
        }

        function exportCsv() {
            var dataStr = "x,y\n";
            tabularData.forEach(function(item) {
            dataStr += item.x + ',' + item.y + '\n';
            });

            var downloadLink = document.createElement('a');
            downloadLink.style.display = 'none';
            downloadLink.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(dataStr);
            downloadLink.download = "test.csv";
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);
        }

        // The Dojo example
        require([
            "dojo/_base/lang",
            "dijit/form/Button",
            "dojo/domReady!"
        ], function(lang, Button) {
            var dojoBtn = new Button({
            label: "Save CSV",
            onClick: exportCsv
            }, "dojoBtn");
            dojoBtn.startup();
        });

        // Binding the same event handler as in the Dojo example to HTML Button
        var htmlBtn = document.getElementById("htmlBtn");
        htmlBtn.onclick = exportCsv;
    </script>
</body>
</html>
2

Well, I found the solution to my problem after posting here:

I updated to Dojo 1.14.2 and everything works as expected now.