React v17 lighthouse passive events

[ilanbm]

Running Lighthouse on pages with Button component get "Does not use passive listeners to improve scrolling performance"
"Consider marking your touch and wheel event listeners as passive to improve your page's scroll performance"

https://web.dev/uses-passive-event-listeners/?utm_source=lighthouse&utm_medium=devtools

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Expected Behavior 🤔

Steps to Reproduce 🕹

Steps:

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v5.?.?
React
Browser
TypeScript
etc.

[oliviertassinari]

@ilanbm Please provide a minimal reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[oliviertassinari]

A duplicate of #13623 (comment)?

[oliviertassinari]

I have run a lighthouse run on https://next--material-ui.netlify.app/components/buttons/, the latest version, we comply to the rule:

I'm closing, we need a reproduction.

[oliviertassinari]

A reproduction https://codesandbox.io/s/6kw4d (deployed on https://csb-6kw4d.netlify.app/) with React 17. See #22269 (comment) for a bit more context.

[oliviertassinari]

My understanding of the situation so far: facebook/react#6436 (comment).

[ilanbm]

I found that it only happens when using react@experimental , with react 16.13.1 it doesn't happen

[ilanbm]

Just read about React v17 event delegation, is there a way to set the root element to be passive?

[eps1lon]

Let's reduce this to a reproduction without any Material-UI components and then illustrate our use case. With those two code samples we can open an issue in the React repo. This will reduce the time it takes for a core member to respond.

[oliviertassinari]

@eps1lon done, turned into facebook/react#19651

[oliviertassinari]

Solved in facebook/react#19651