Issue with stopPropagation

[marcselman]

Summary:

When an element in a modal calls stopPropagation on the click event, it seems the first click on the overlay does not close the modal.

Steps to reproduce:

1. Create a modal with onRequestClose
2. Add a click handler to any element in the modal
3. Call stopPropagation on the click event object
4. Click on the overlay

Expected behavior:

The modal should close on the first click on the overlay.

Link to example of issue:

https://codepen.io/marcselman/pen/eYWrNML

Additional notes:

I'm using stopPropagation because I have some nested elements in the modal with multiple event handlers and I sometimes don't want the click event to bubble down to a lower element.

[diasbruno]

Hi @marcselman, in this case, I think, you have to process this event and decide to fully stop or to let it propagate.

[marcselman]

Are you sure? Why would a click on a different element (in the example a paragraph tag) prevent the click after that to work? I'm also seeing this issue when I add an ag-grid component in a modal popup and use the scroll bar of the grid. I suppose they have an event handler on the scrollbar that does similar things. But still the overlay click event should work independantly right?

It looks like the modal itself needs to receive some sort of click or focus before the handler for the overlay will work. So when I click on any element in the modal that does not propogate the event to the modal itself, the overlay event does not work. Is that intended behaviour?

[diasbruno]

Maybe I didn't get it.... Can you write a small exemple?

[marcselman]

It's in the original post: https://codepen.io/marcselman/pen/eYWrNML

[diasbruno]

🤦‍♂️

[diasbruno]

Now I see...This is bad...Since the second event works, should this be cause by the synthetic event? Just an idea of what can cause this.

https://reactjs.org/docs/events.html

[diasbruno]

This is weird,

Note: As of v17, e.persist() doesn’t do anything because the SyntheticEvent is no longer pooled.

But...

https://reactjs.org/docs/legacy-event-pooling.html

e => (e.presist(), e.stopPropagation()) works as expected.

[marcselman]

I don't see what persist has to do with this issue. I don't need to access any event properties after the handler has run. When I add the call to persist in my codepen demo it still does not work.

I tried simulating a click event on the modal content by calling document.getElementsByClassName('ReactModal__Content')[0].click() in the event handler and that seems to work.

When I look at the source code of react-modal I see some code like contentHasFocus() and other focus related stuff. So I think the content element needs to have focus for some reason to be able to handle the overlay close event.

Another thing I checked: the escape key does always work, so that apparently skips some check that does happen in the overlay click event.