score:0

Passive event listener has not been supported by React. What you have to do is obtain the ref of the real dom and attach the event listener with {passive:true} as an option. And don't forget to detach the event listener before destroying the component(in the componentWillUnmount actually).

score:0

you can check the github fork for details (issues #20) on how to fix, below is what it does:

amend lines 132, 134 & 136 of sidenav.js.

Changed from:

this.dragTarget.addEventListener('touchmove', this._handleDragTargetDragBound);
this._overlay.addEventListener('touchmove', this._handleCloseDragBound);
this.el.addEventListener('touchmove', this._handleCloseDragBound);

to:

this.dragTarget.addEventListener('touchmove', this._handleDragTargetDragBound, { passive: true});
this._overlay.addEventListener('touchmove', this._handleCloseDragBound, { passive: true});
this.el.addEventListener('touchmove', this._handleCloseDragBound, { passive: true});

score:3

Many libraries and frameworks add non-passive event listeners by default. Not much you can do about it.. Instead of waiting for a support I Would recommend using highly flexible and configurable passive-events-support package to debug and make event listeners passive without touching 3rd party source code.

First, after installing the package debug the touch and wheel event listeners and their parameters:

import { passiveSupport } from 'passive-events-support/src/utils'
passiveSupport({ debug: true })

This should console log all the event listeners

[Passive Events Support] Non-passive Event Listener
  element: div.some-element
  event: 'touchstart'
  handler:
    fn: ƒ (e)
    fnArgument: 'e'
    fnContent: 'console.log(e)'
    fnPrevented: false
  arguments: false

Notice arguments parameter, if it is false, undefined or object without passive parameter inside, this event is what causes your browser to throw a warning and is impacting the scroll performance.

To fix it just use the package and logged information to make this exact event listener as passive:

import { passiveSupport } from 'passive-events-support/src/utils'
passiveSupport({
  debug: false,
  // add this one
  listeners: [
    {
      element: 'div.some-element',
      event: 'touchstart'
    }
  ]
})

Be careful tho, event listeners that call preventDefault() should not be marked as passive, but to fix the warning should still have passive parameter with a value of false instead.

By default the package will check if it is prevented from the handler itself, but in case the event listener is prevented from the method called inside the handler, the package loses track of it. To force assign passive: false just pass prevented: true parameter to listeners item:

passiveSupport({
  //...
  listeners: [
    {
      element: 'div.some-element',
      event: 'touchstart',
      prevented: true
    }
  ]
})

For me, this package fixed all the warnings cause by materialize and jquery. Hope it helps you too.


Related Query

More Query from same tag