React: Popups opened from `onClick` handlers get blocked by browsers

[fiatjaf]

Which doesn't happen when I use addEventListener to bind 'click' to a function that opens a popup.

[syranide]

I'm assuming this is a global issue with all many events, although onclick is probably by the far most common allowed initiator for popups.

[sophiebits]

Can you post a jsfiddle with a minimal repro case? (What browser?)

[fiatjaf]

Well, I made this JSFiddle just to show it and it suddenly worked for me in Chrome, Firefox and Opera (it opened the popup without asking for confirmation): http://jsfiddle.net/zNm2n/

But I'm sure it wasn't working in my local project here today morning (I was using the latest React from NPM and browserify in Chrome 35.0 at Ubuntu -- the same browser I'm using now). I don't know what happened/is happening.

(By not working I mean Chrome blocked the popup and displayed that tiny box with a red cross on the right side of the address notifying me that something was blocked)

[sompylasar]

Does React handle onClick asynchronously? Browsers infer user intent from
the stack of sensitive functions like window.open on desktops and
html5media.play on mobile devices.
26.06.2014 22:52 пользователь "Giovanni" [email protected] написал:

Well, I made this JSFiddle just to show it and it worked for me in Chrome,
Firefox and Opera (it opened the popup without asking for confirmation):
http://jsfiddle.net/zNm2n/

But I'm sure it wasn't working in my local project here today morning (I
was using the latest React from NPM and browserify in Chrome 35.0 at Ubuntu
-- the same browser I'm using now). I don't know what happened/is happening.

(By not working I mean Chrome blocked the popup and displayed that tiny
box with a red cross on the right side of the address notifying me that
something was blocked)

—
Reply to this email directly or view it on GitHub
https://github.com/facebook/react/issues/1745#issuecomment-47264502.

[sophiebits]

No, events are all handled synchronously right now.

[fiatjaf]

I've never seen this problem again, so I'll hope it was just a bug of my head.

[sudhirj]

I'd vote to reopen - this is quite real. There's a example up on www.justickets.in - try booking a ticket with a credit card (feel free to use the test card 4242 4242 4242 4242 with future expiry and 111 as the CVV). I'm opening the 2 factor auth popup onClick, but the popup blocker is triggered anyway.

[zpao]

This popup? https://cloudup.com/czUUANUtcv6

That was with Firefox. Different browsers have different heuristics for determining if something is a popup and should be blocked. I don't think there's ever been a definitive guide on making window.open work 100% of the time these days. Having the call to the event handler in the callstack is the closest you'll get to a guarantee.

There's nothing else we can do here AFAIK.

[rricard]

Hi, just to say I still have the issue, I can find a way around it using listeners and the react lifecycle though. I'll try to get a snippet there.

[rricard]

Never mind I had the popup launched from an async action 😉

[DannyLeiton]

@rricard: How did you do it man?

[rricard]

@DannyLeiton: Just get a breakpoint where you want to start the popup. Then, observe the stack: if the stack goes back to your original click, then you should fill a bug report because this is not normal! However, in my case (and probably in your case) my stack was stopping at the return of an async action (graphql query with apollo in my case). What I finally did is find a way to prefetch the query before showing the clickable button so the button could hit the apollo cache and get the result in the same stack...

[rricard]

In a more concise manner: avoid network (or other async) calls between the click event and the popup creation!

[franciscop-invast]

I was getting the url from the back-end, which made the new tab opening
being blocked. Switching the source of the URL to the front-end or doing a window.location.href = url; (open in same window) seems to do the trick.

[dancherb]

in my case I want to download a file (by opening the URL in a new tab) after requesting the URL from the back-end, so it's async and same window wouldn't work - any ideas? @franciscop-invast

[sompylasar]

in my case I want to download a file (by opening the URL in a new tab) after requesting the URL from the back-end, so it's async and same window wouldn't work - any ideas?

@dancherb Make a backend endpoint that HTTP-redirects (if URL is quick to get) or JS-redirects (print the JS at the end of the body, flush some spinner from the server immediately so that the "downloading" page doesn't feel empty) to the correct URL after the URL is ready. Open that endpoint in a new tab immediately, let it hang there.