react-modal icon indicating copy to clipboard operation
react-modal copied to clipboard

Opening link in new tab prevents modal from closing after single click on overlay

Open fenok opened this issue 3 years ago • 1 comments

Summary:

If modal content has a link inside, and this link is opened in new tab, the modal enters a state where it requires a click anywhere before it can be closed by clicking on its overlay.

Steps to reproduce:

  1. Place a link inside modal.
  2. Open this link in new tab (either via the context menu or by middle mouse button).
  3. Now the modal can't be closed by clicking on its overlay without clicking anywhere first.

Expected behavior:

A modal should always close after a single click on its overlay.

Link to example of issue:

https://codesandbox.io/s/jolly-water-e59ej

Additional notes:

The issue is reproducible in Chrome 97.

As far as I can tell, the issue boils down to this. It looks like handleOverlayOnClick is expected to always be called after handleContentOnMouseDown, handleContentOnClick, or handleContentOnMouseUp, but it's not the case, because there are ways to trigger mousedown without triggering click. Opening link in new tab is just one of them.

fenok avatar Jan 31 '22 13:01 fenok

I am curious, does this seem to ever work? Because I think this might be the correct behavior, but I maybe wrong.

kkyusufk avatar May 08 '22 08:05 kkyusufk