[colReorder] warning Added non-passive event listener to a scroll-blocking

lenamtl

Hi,

I'm testing colReorder v 1.5.2

I'm getting this warning
Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.

This was not present in older version, anyone have a fix for this?

I have opened an issue on github
https://github.com/DataTables/Plugins/issues/487

colin

Please don't post in both places, the forum is enough.

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

lenamtl

Hi,

To see the warning messages go to
https://datatables.net/extensions/colreorder/examples/initialisation/simple.html
open Chrome dev tool then check console tab.

This should be fixed as Chrome staring to turn these warning to error in some case.

colin

I'm not seeing that message in either Chrome of Firefox. Which version are you using? Can you provide a screenshot showing it, please.

Colin

lenamtl

Hi,

to see it go to the page https://datatables.net/extensions/colreorder/examples/initialisation/simple.html
open the console
* then refresh the page

I'm using the latest
Version 84.0.4147.125 (Official Build) (64-bit)

tangerine

I'm not seeing that message in Chrome.

lenamtl

You have to load the page then refresh the page to see the warning into the console .
see image

allan

Yup - I'm seeing it, and I agree it needs to be addressed. There is an on going issue in jQuery for this, and ideally we'd just wait for the library to be updated for it, but more likely we'll look at putting a patch in to our code instead.

Allan

lenamtl

Hi,

I don't beleive they will fix that.

We need to find a fix asap as Chrome started to change some of these
warning "non-passive event listener to a scroll-blocking" to an error!

I just fixed one similare issue with Select2 dropdown plugin
https://github.com/select2/select2/issues/5737#issuecomment-662627168

What we need to know is doe we need to change to passive: true or false in order to use the colReorder

Question does colReorder is a a fork from another script?

I think this is not very hard to fix and will prevent error in near future.

Thanks

allan

No, ColReorder is not a fork. It's source is available here.

We will get to it, unfortunately we've got a not insignificant support backlog at the moment while also trying to drive the project forward. I'm hoping to do some patch releases soon though and will be looking at this then.

Allan

tefdat

Hi,
on my coorporate device (where verbose level is high) I got as well a bunch of this warnings. Before you start editing the source functions, please try this easy workaround which worked for me flawlessly. Just put just below the jquery load/require in your HTML header.

allan

Thank you - I'm quite keen for our software not to patch jQuery, but it looks like the only other solution at the moment is to wait for jQuery 4, and there is no indication of when that will drop.

It probably is worth making this fix in our next release.

Allan

lenamtl

I have tried this fix and this seems fine.

jQuery.event.special.touchstart = {
                  setup: function( _, ns, handle ){
                    if ( ns.includes("noPreventDefault") ) {
                      this.addEventListener("touchstart", handle, { passive: false });
                    } else {
                      this.addEventListener("touchstart", handle, { passive: true });
                    }
                  }
                };
                jQuery.event.special.touchmove = {
                  setup: function( _, ns, handle ){
                    if ( ns.includes("noPreventDefault") ) {
                      this.addEventListener("touchmove", handle, { passive: false });
                    } else {
                      this.addEventListener("touchmove", handle, { passive: true });
                    }
                  }
                };