Unable to preventDefault inside passive event listener

[derwaldgeist]

First of all, thanks for porting Slick to React, highly appreciated!

When executing some event handlers inside my slides, I am getting this error:

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

The error occurs in method swipeMove here:

  if (touchObject.swipeLength > 10) {
    state["swiping"] = true;
    e.preventDefault();
  }

https://github.com/akiran/react-slick/blob/master/src/utils/innerSliderUtils.js#L412

This only happens if I wrap these components with the slick carousel and breaks the functionality of the components.

Any idea what might cause this?

One thing to notice: it happens if the slide contains a React Bootstrap Modal and the event is called from within such a modal.

[derwaldgeist]

The problem seems to be caused by touch events that are passed "trough" the modal to the underlying carousel component. The whole carousel seems to react on swipes although it is covered by the modal.

[lekevoid]

I had this error message. The solution for me was to use the CSS
.slick-list, .slick-track { touch-action:pan-y; }
The message disappeared.

[swartex]

I had this error message. The solution for me was to use the CSS
.slick-list, .slick-track { touch-action:pan-y; }
The message disappeared.

thanks, this solved the problem

[karan-khanna]

Downgrading to React@16.14.0 fixed the issue.
The issue occurred due to latest changes in React@17. [https://github.com/facebook/react/pull/19654]

[turelmert]

Adding "touch-action:pan-y;" didn't worked for me, still having "Unable to preventDefault inside passive event listener invocation." error on console. Any solutions or suggestions ?

[akiran]

@turelmert Would you like to send a PR with a fix?

[turelmert]

Sure, let me try.

[turelmert]

Hi @akiran , just created a PR #1971