diff --git a/packages/desktop-client/src/browser-preload.browser.js b/packages/desktop-client/src/browser-preload.browser.js index f71812e1d6d010ffd5a606454798e4eec1dc6f30..ddb1928b7f3b0ac52528997dabed3ae55dc279ad 100644 --- a/packages/desktop-client/src/browser-preload.browser.js +++ b/packages/desktop-client/src/browser-preload.browser.js @@ -52,8 +52,19 @@ global.Actual = { openFileDialog: async ({ filters = [], properties }) => { return new Promise(resolve => { - let input = document.createElement('input'); + let createdElement = false; + // Attempt to reuse an already-created file input. + let input = document.body.querySelector( + 'input[id="open-file-dialog-input"]', + ); + if (!input) { + createdElement = true; + input = document.createElement('input'); + } + input.type = 'file'; + input.id = 'open-file-dialog-input'; + input.value = null; let filter = filters.find(filter => filter.extensions); if (filter) { @@ -63,15 +74,9 @@ global.Actual = { input.style.position = 'absolute'; input.style.top = '0px'; input.style.left = '0px'; - input.dispatchEvent( - new MouseEvent('click', { - view: window, - bubbles: true, - cancelable: true, - }), - ); + input.style.display = 'none'; - input.addEventListener('change', e => { + input.onchange = e => { let file = e.target.files[0]; let filename = file.name.replace(/.*(\.[^.]*)/, 'file$1'); @@ -89,7 +94,15 @@ global.Actual = { alert('Error reading file'); }; } - }); + }; + + // In Safari the file input has to be in the DOM for change events to + // reliably fire. + if (createdElement) { + document.body.appendChild(input); + } + + input.click(); }); }, diff --git a/packages/desktop-client/src/components/modals/ImportTransactions.js b/packages/desktop-client/src/components/modals/ImportTransactions.js index 0ac731ca03534845359139ae823dd6180d8474cd..94fe6b0acccca6482d733aaf9787f17598907f62 100644 --- a/packages/desktop-client/src/components/modals/ImportTransactions.js +++ b/packages/desktop-client/src/components/modals/ImportTransactions.js @@ -671,8 +671,8 @@ function ImportTransactions({ setFieldMappings({ ...fieldMappings, ...newFieldMappings }); } - function onNewFile() { - const res = window.Actual.openFileDialog({ + async function onNewFile() { + const res = await window.Actual.openFileDialog({ filters: [ { name: 'Financial Files', extensions: ['qif', 'ofx', 'qfx', 'csv'] }, ], diff --git a/upcoming-release-notes/1349.md b/upcoming-release-notes/1349.md new file mode 100644 index 0000000000000000000000000000000000000000..2744228ee5ee0043e44323d603df50d17ead66be --- /dev/null +++ b/upcoming-release-notes/1349.md @@ -0,0 +1,6 @@ +--- +category: Bugfix +authors: [Cldfire] +--- + +Fix bug causing transaction import in Safari to be unreliable