Why open link is not working inside a async handler on iPad Safari?

Here is some strange things on opening _blank link programatically.

Environment:

• Device: iPad 14
• browser: Safari latest

A button is handling async await operation, and then triggering open a link as _blank target. I am not sure why it is not working.

<button onClick={async () => {
  // handling some await heavy operation
  // await until it succeed
  window.open('some url', '_blank'); // this is not working
} />

Any suggestions are welcome!

Answer

Browsers tend to block window.open, if the call can not be directly tied to a user interaction, such as a click or something. And by introducing any asynchronous stuff, you are destroying that direct connection. To the browser this now looks the same, as if you had tried to open this popup without any user interaction at all – and that is a typical sign of spammy advertising popups, and therefor it gets blocked.

You can basically really only open the popup directly on the button click – and then change the URL loaded inside the popup later, if that depends on the result of your async operation. (Opening the popup with and empty URL or about:blank usually works, should you not have the real target URL at the point the button gets clicked and have to wait for the async operation to get it.)