CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
user12083483
user12083483

Reputation: 87

React Warning non-passive event listener to a scroll-blocking 'touchstart'

I have a react component with a material-ui Slider. Each time this component renders I get 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"

How can this be fixed?

image of warnings in console

Upvotes: 7

Views: 18191

Answers (4)

Andras
Andras

Reputation: 87

Just leave this here hopefully for someone will be helpful one day. I was having this error message and as I was searching for a solution for a FramerMotion bug come accross this line of code and not just the issue with FramerMotion disappered but also the annoying chrome [violation] error message.

<script>history.scrollRestoration = "manual"</script>

Upvotes: 0

Ignas Damunskis
Ignas Damunskis

Reputation: 1504

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.

Upvotes: 6

icedcoffeyyds
icedcoffeyyds

Reputation: 31

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});

Upvotes: 0

Pengson
Pengson

Reputation: 875

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).

Upvotes: 0

Related Questions