React: Non-Passive event warnings when any <select> component is clicked

Created on 14 Nov 2017 · 10Comments · Source: facebook/react

Do you want to request a feature or report a bug?
A bug

What is the current behavior?
The following console warning is emitted every time a <select> input is clicked:

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

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template for React 16: https://jsfiddle.net/Luktwrdm/, template for React 15: https://jsfiddle.net/hmbg7e9w/).

The steps are:

In a new tab, visit https://codepen.io/anon/pen/QOgNKg
Open the browser console and ensure messages are unfiltered
Run the code and click either of the select fields on the page.

A warning is emitted every time either select field is clicked. The selection does not need to change.

What is the expected behavior?

There should be no warning as i have not attached any event listeners.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React 16.1.0
Chrome 62.0.3202.89 (Official Build) (64-bit)
Tested also on Ubuntu Opera and has the same issue.

The issue began appearing for me after a recent upgrade of Chrome. I was using React 15-stable when i first saw it, so i upgraded to 16.1.0 to see if the issue is resolved and it was not.

DOM

Source

jimyaghi

👍1

Most helpful comment

I created simple select-option html file and clicked select box on following browsers(no chrome extensions).
but I got a warning message about non-passive event listener at all versions

chrome
- 64.0.3282.186(Official Build) (64bit)
- 65.0.3325.162(Official Build) (64bit)
chrome canary
- 67.0.3374.0(Official Build) (64bit)
- 67.0.3375.0(Official Build) (64bit)
chromium
- 65.0.3325.162(Official Build) (64bit)

html file that i checked.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <select>
        <option value="50">50
        </option>
        <option value="100">100
        </option>
        <option value="200">200
        </option>
    </select>
</body>
</html>

I didn't care this problem. but I think we have to report chrome team (not react issues).

tomlla on 20 Mar 2018

👍7

All 10 comments

@jimyaghi Hi, I've just tried out the Codepen on Chrome 62 and I don't see this issue in the console. I've tied on both Windows and Mac and neither show for me.

trueadm on 14 Nov 2017

@trueadm Make sure to check the "Default levels -> verbose" in your Console.
I believe this is related with https://github.com/facebook/react/issues/6436.

skiritsis on 14 Nov 2017

@skiritsis I'm not sure how I missed that option. Thanks! I'm not sure there's a simple fix for this unless we employ some of the ideas from https://github.com/facebook/react/issues/6436.

trueadm on 14 Nov 2017

You guys are absolutely right. It looks like there's discussion around this already. Sorry!

jimyaghi on 14 Nov 2017

Just wanted to let you guys know that sometimes you can get this Violation even when there are no scripts present on the page at all. It is suspected it is caused by Add-ons...

See: https://stackoverflow.com/questions/46717866/violation-added-non-passive-event-listener-when-no-javascript-present

Download on 23 Jan 2018

I created simple select-option html file and clicked select box on following browsers(no chrome extensions).
but I got a warning message about non-passive event listener at all versions

chrome
- 64.0.3282.186(Official Build) (64bit)
- 65.0.3325.162(Official Build) (64bit)
chrome canary
- 67.0.3374.0(Official Build) (64bit)
- 67.0.3375.0(Official Build) (64bit)
chromium
- 65.0.3325.162(Official Build) (64bit)

html file that i checked.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <select>
        <option value="50">50
        </option>
        <option value="100">100
        </option>
        <option value="200">200
        </option>
    </select>
</body>
</html>

I didn't care this problem. but I think we have to report chrome team (not react issues).

tomlla on 20 Mar 2018

👍7

Looks like there is no issue. Feel free to report to Chrome!