Fix model upload in safari browser

[ruegenbfr]

The model upload in safari browser (version 15.4 [17613.1.17.1.13]) is not working properly.

This problem is not present in:

• firefox (v115.6.0esr)
• edge (v120.0.2210.91)
• chrome (v120.0.6099.129)

Reproduce:

• load some example or upload model --> model is loaded
• upload model --> File open dialog does not open anymore, console does not show any problems

[j-hha]

Debugging notes:

• problem affects Safari v > 15.4 (could reproduce for v18.0)
• clicking on input type=file works
  • event fires
  • event is correct and seems identical to event fired when no example data has been loaded
  • target is correct, target type is file
  • cancel does not fire early
  • no error event seems to fire
  • no error or warning in console
  • removing display:none from actual input
    • clicking the actual input fires click event as expected and finder opens
    • clicking the proxy fires click event as expected but finder does not open
• if .click() called in toolbar-action.component in onSelectModelFile(type: ModelFileType) { ... } (before emitting), finder opens
• if .click() called in toolbar-action-container.component in onSelectModelFile(type: ModelFileType) { ... }, finder opens
• if .click() called in checkConditionsAndLoadFile callback inside .then(), EventListener detects click, BUT finder does NOT open --> .then() may be the problem
• PoC:
  • Promise ... .then(() => {click}) does not seem cause problems in Safari
  • async... .then(() => {click}) seems to cause a problem in Safari

=> Probable explanation: If we trigger a click programmatically within an async function, it becomes an untrusted event. For security reasons, browsers should block (popup) windows from opening. I therefore assume, that this is also true for triggering the opening of a finder window. Safari seems to stick to these security rules, whereas the other Browsers seem to ignore them.

See for example

• "Modern browsers have strict popup blocker policies. Popup windows must be opened in direct response to user input, and a separate user gesture event is required for each Window.open() call. This prevents sites from spamming users with lots of windows." MDN docs for window.open()
• "Safari requires the file input dialog to open programmatically as a direct result of a user action. If the file input is clicked programmatically, this must happen in JavaScript code, which handles a user event." Source: Telerik Docs for OpenSelectFilesDialog

=> Suggested solution: Refactor code, so we don't violate browser security policies.

Possible solutions:

• the async process checks, if the user has altered the loaded data
  • if the user has NOT altered the data, the click event on the input is triggered programmatically and we want the file upload dialog to appear
  • if the user has altered the data, the 'data will be lost, do you still want to proceed' dialog gets triggered (framework method, also appears to result in loss of click context), if the user OKs it, we want the file upload to appear --> both of these actions will not work in safari because the context of the actual user click is probably lost

What we could do:

• trigger the async data-altered-check and subsequent the proceed-dialog on click on 'upload data' button rather than on proxy file upload button and only open the menu containing the proxy file upload buttons after this has been sorted
• trigger the async data-altered-check on click on 'upload data' button and save result in parent, trigged proceed-dialog after the file to upload has been selected and prevent loading of file if user cancels process
• trigger the async data-altered-check on click on 'upload data' button and save result in parent, trigged proceed-dialog after the file upload button has been clicked, and show the proceed-dialog at the same time as upload window as an info panel only and ask user to cancel the upload in the input triggered dialog

[j-hha]

@bfrgottscma @afalenski could we talk about this real quick today? I'd have to change the behaviour of the upload buttons a bit to fix this bug and I'd like to confer with you on that.

[j-hha]

Oct 17, 2024: Decision PO: trigger the async data-altered-check and subsequent the proceed-dialog on click on 'upload data' button rather than on proxy file upload button and only open the menu containing the proxy file upload buttons after this has been sorted