Non-passive event listener warnings

[mlarsson]

When using datetimepicker in my Angular2 app I get a lot of warnings in the console in Chrome:

VM1152:15 [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 VM1152:15 [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 VM1152:15 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952 VM1152:15 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952 VM1152:15 [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 ...

Im using v. 2.5.18.

[kevinchugh]

same

[cytech]

also same 2.5.20

[emveeoh]

also same 2.5.20

[attack68]

I had the same issue and got the warnings to go away with the following:

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

source: https://stackoverflow.com/questions/46094912/added-non-passive-event-listener-to-a-scroll-blocking-touchstart-event