Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to preventDefault inside passive event listener #1650

Open
derwaldgeist opened this issue Oct 5, 2019 · 10 comments
Open

Unable to preventDefault inside passive event listener #1650

derwaldgeist opened this issue Oct 5, 2019 · 10 comments
Assignees

Comments

@derwaldgeist
Copy link

derwaldgeist commented Oct 5, 2019

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
Copy link
Author

derwaldgeist commented Oct 6, 2019

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
Copy link

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
Copy link

swartex commented Sep 16, 2020

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
Copy link

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
Copy link

turelmert commented Jan 23, 2021

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 akiran self-assigned this Jan 24, 2021
@akiran
Copy link
Owner

akiran commented Jan 24, 2021

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

@turelmert
Copy link

Sure, let me try.

@turelmert
Copy link

Hi @akiran , just created a PR #1971

@Rabbit523
Copy link

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

@sheracore
Copy link

@swartex thanks your solution solves my problem

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

8 participants