Modals: Unable to preventDefault inside passive event listener

[derwaldgeist]

I try to use a Modal inside a slide of the React Slick carousel:

https://github.com/akiran/react-slick

Each slide contains an editable media element (e.g. a picture or a YouTube video), and the modal is being used to edit this media element.

Before I added the carousel (i.e. until I used only one editable media object on the page), everything worked fine. But since I packed the media elements into the slides of the carousel, I am getting a weird error from Chome related to event bubbling when removing the modal from the DOM (by not rendering it anymore):

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

In effect, the Modal stays on the screen. Same behaviour on Safari iOS (without an error message, though; the modal just stays there).

I am not exactly sure if this problem is caused by React Bootstrap or React Slick, but I think it might be related to the fact that the modal is being rendered outside the regular app's DOM hierarchy.

Note: there is only one modal being shown at a time.

[derwaldgeist]

The problem seems to be caused by events that are passed "trough" the modal to the underlying carousel component.

[taion]

From where is preventDefault getting called?

[derwaldgeist]

From within the React Slick component:
https://github.com/akiran/react-slick/blob/master/src/utils/innerSliderUtils.js#L412

I now found out that the slider reacts on touch swipes, although it is completely covered by the modal. I can even swipe through the pages by swiping over the modal (I checked this by adding a callback whenever a slide transition happens).

Shouldn't the modal block all clicks (or touch events) from going through to content behind it? It might also be that the carousel itself sets up global event handlers.

[derwaldgeist]

I created an issue in React Slick, too: akiran/react-slick#1650

[derwaldgeist]

The same problem applies to nuka-carousel:

https://github.com/FormidableLabs/nuka-carousel

[derwaldgeist]

I can confirm that events are actually passed through the modal to the underlying components. Which is most likely not what you would intend, because it can cause a lot of unwanted side-effects. Imagine if you tapped on a delete button hidden below the modal... IIRC, regular bootstrap blocks all events from getting through.