ReactJS onClick not working in Firefox but works in Chrome

Question

I am trying to create a ReactJS-App using FabricJS canvas. For a test I created simple SVG shapes and add them to a canvas. I wand to download them as a .png and for that I use a button.

I use the arrow-function thing instead of .bind() for the method.

The following code is the part that creates the png and downloads it. It works in Chrome but not in Firefox.

import React from 'react';
import {fabric} from 'fabric';
import {Button} from 'react-bootstrap';


class FabricCanvas extends React.Component{

//Code for adding elements to canvas omitted

    saveToCanvas = () => {

        var link = document.createElement("a");
        link.href = this.the_canvas.toDataURL({format: 'png'});
        link.download = "avatar.png";
        link.click();

    }

    render(){

        return (
            <React.Fragment>
                <canvas id='main-canvas'>
                </canvas>
                <Button className='large success' onClick={this.saveToCanvas} >
                    Download
                </Button>
            </React.Fragment>
        );
    }
}