search

akiran / react-slick

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

Google Lighthouse shows warning about passive event listeners #2124

Open simonhenke opened 2 years ago

simonhenke commented 2 years ago

Google Lighthouse shows the following warning: image

The warning doesn't show up when setting touchMove to false in the slider options, so the issue seems to come from the touchEvents (which probably should be set to passive):

https://web.dev/uses-passive-event-listeners/?utm_source=lighthouse&utm_medium=devtools

derweili commented 2 years ago

I think this comes from here the InnerSlider Component.

The Event listeners are create here: https://github.com/akiran/react-slick/blob/c923c95dce4b4efaf21e83f912c5055298a84be4/src/inner-slider.js#L727-L740

And passed directly to the div: https://github.com/akiran/react-slick/blob/c923c95dce4b4efaf21e83f912c5055298a84be4/src/inner-slider.js#L755-L759

To solve this warning, the component needs a bit refactoring. The Event Listeners must not be passed directly to the div. Instead addEventListener() should be used on the divs ref.

For example:

this.list.addEventListener('mouseMove', this.swipeMove, { passive: false })

Implementing this is a bit complex because the event listeners are added and removed depending on the current this.state.dragging value.