question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[ClickAwayListener] Is being fired without an onClick event after upgrading react and react-dom to v17

See original GitHub issue

On my app I have a menu that worked fine until I upgraded react and react-dom. After upgrading react and react-dom from version 16.14.0 to version 17.0.0- on menu click, the menu flashes-it opens and closes right away.

  • 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 😯

On menu click- the menu opens and closes right away, for some reason the ClickAwayListener is being fired.

Expected Behavior 🤔

On menu click- the menu should open, on click away it should close.

Steps to Reproduce 🕹

Steps:

  1. Upgrade react and react-dom to v17.0.0
  2. Click the menu

Codesandbox: ~https://codesandbox.io/s/material-ui-issue-forked-byfgm?file=/src/index.js~ Invalid. New repro: https://codesandbox.io/s/material-ui-issue-forked-13053?file=/src/Demo.js

Your Environment 🌎

Tech Version
Material-UI/core v4.11.0
React v17.0.0
React-dom v17.0.0
Chrome v86.0.4240.75

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:12
  • Comments:25 (13 by maintainers)

github_iconTop GitHub Comments

13reactions
stevewillardcommented, Oct 26, 2020

What about the use case where you have a <Popper /> and put a <ClickAwayListener /> on the children?

8reactions
wkerswell-greshamcommented, Oct 26, 2020

Sandbox for the issue @stevewillard stated. Using a popper with a clickaway listener in it.

Read more comments on GitHub >

github_iconTop Results From Across the Web

[ClickAwayListener] Is being fired without an onClick event ...
After upgrading react and react-dom from version 16.14.0 to version 17.0.0 - on menu click, the menu flashes-it opens and closes right away....
Read more >
ClickAwayListener doesn't fire when clicking on a link/button ...
ClickAwayListener component works by attaching the event listener to the document , when a mouse event fires, it fires onClickAway only when ......
Read more >
ClickAwayListener is disabling onClick in a nested component ...
Coding example for the question ClickAwayListener is disabling onClick in a nested component-Reactjs.
Read more >
React 17 attaches events to the root DOM container instead of ...
React figures out which component to call when a DOM event gets fired by following Event bubbling for Event Delegation. Event bubbles up...
Read more >
ClickAwayListener API - MUI Base
Name Type Default children * element onClickAway * func disableReactTree bool false
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found