Как вызвать .click () на скрытом элементе в Safari с помощью React.js?

Question

У меня есть кнопка в React.js, которая одним щелчком мыши отправляет данные на сервер для преобразования в файл CSV.Когда я получу ответ, я хочу, чтобы пользователи могли загружать файл CSV.Он работает в Firefox и Chrome, но не в Safari.Есть идеи?Я знаю .click () не поддерживается на HTMLElement.click () .

Вот мой код:

import React from 'react';
import { graphql } from 'react-apollo';

import ExportDataQL from 'ExportDataQL'
import Icon from 'Icon';

const handleExport = (data, type, exportToCSV) => {
  const variables = { 
    data: JSON.stringify(data),
    type
  }

  exportToCSV({ variables })
  .then( response => {
    const { fileName, fileUri } = response.data.exportToCSV

    var hiddenElement = document.createElement('a');
    hiddenElement.href = fileUri;
    hiddenElement.target = '_blank';
    hiddenElement.download = fileName;
    document.body.appendChild(hiddenElement);
    console.log('clicking')
    // hiddenElement.click();
    hiddenElement.dispatchEvent(new MouseEvent(`click`, {bubbles: true, cancelable: true, view: window}))
    hiddenElement.remove()
  })
  .catch( e => console.log('ERROR getting download URL:', e) )
}

const ExportToCSV = ({ data, dataType, buttonText, exportToCSV }) => {
  if (data === undefined || data.length===0) return <span></span>

  return <button
          type='button'
          className="btn btn-link hover_cursor font-weight-bold"
          onClick={() => handleExport(data, dataType, exportToCSV)}>
          <Icon IconClassName="fill-primary" icon='excel-file'/><span className="ml-2">
          {buttonText ? buttonText : "Export data"}</span>
        </button>
}


export default graphql(ExportDataQL.exportToCSV, {name: "exportToCSV"})(ExportToCSV);