akiran / react-slick

React carousel component
http://react-slick.neostack.com/
MIT License
11.77k stars 2.1k forks source link

Unable to preventDefault inside passive event listener #1650

Open derwaldgeist opened 5 years ago

derwaldgeist commented 5 years ago

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 commented 5 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

turelmert commented 3 years ago

Sure, let me try.

turelmert commented 3 years ago

Hi @akiran , just created a PR https://github.com/akiran/react-slick/pull/1971

Rabbit523 commented 3 years ago

same problem like @turelmert . css change couldn't solve the issue.

sheracore commented 3 years ago

@swartex thanks your solution solves my problem