search

rlemaigre / Easy-DnD

A drag and drop implementation for Vue.js 2 and 3 https://codesandbox.io/s/easy-dnd-demo-9mbij https://codesandbox.io/s/easy-dnd-demo-2-xnqbz
MIT License
384 stars 52 forks source link

Touchstart event listener causing console warning about scroll-blocking #110

Open methoil opened 2 years ago

methoil commented 2 years ago

I am working on a project that is using this library, and I am seeing this warning in the console for each instance of the Drag component. I don't notice any problems with scrolling on the page but I was wondering if it could be causing some performance issues. I actually see this warning in the demo page as well so is it expected? I don't see any way to mark the event as passive via the component interface. 

vue-easy-dnd.esm.js:746 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. 
Consider marking event handler as 'passive' to make the page more responsive. 
See https://www.chromestatus.com/feature/5745543795965952

image

Gap6769 commented 1 year ago

Hey I have the same issue, any updates on this?

nicholaszuccarelli commented 1 year ago

I haven't had this warning pop up for me. If possible could one of you guys please add a replication link and browser details? I'll try take a look at this next week.

matthew-dean commented 1 year ago

Any event listener that listens to events and does not prevent the event from actually firing (such as scroll listeners) should always be added with { passive: true }. See: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener