[ClickAwayListener] Is being fired without an onClick event after upgrading react and react-dom to v17
See original GitHub issueOn 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:
- Upgrade
react
andreact-dom
to v17.0.0
- 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:
- Created 3 years ago
- Reactions:12
- Comments:25 (13 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
What about the use case where you have a
<Popper />
and put a<ClickAwayListener />
on thechildren
?Sandbox for the issue @stevewillard stated. Using a popper with a clickaway listener in it.