search

react-bootstrap / react-overlays

Utilities for creating robust overlay components
https://react-bootstrap.github.io/react-overlays
MIT License
898 stars 222 forks source link

useRootClose and stopPropagation on React 17 #944

Open ricardozv28 opened 3 years ago

ricardozv28 commented 3 years ago

When updating a project from React16 to React17 run into an "issue" with the useRootClose.

Currently, the project has various buttons/icons that are getting used to trigger the show/hide of different Popovers, the Popovers are being displayed only one at a time, and I am using the useRootClose to close the popover on click events outside of them I need to stop the propagation of the events when the user clicks the triggers (buttons/icons). If the user clicks another trigger while a popover is open, the open popover is getting closed and the new one is displayed, with the changes to event delegation introduced in React17, this is no longer happening since the stopPropagation() is doing what it supposed to do.

Here are some examples React 16: https://codesandbox.io/s/rootclose-stoppropagation-react16-tp7p9 React 17: https://codesandbox.io/s/rootclose-stoppropagation-react17-wckle

Potential Fixes: Adding an option to the useRootClose so the onRootClose method can be fired on the capture phase as suggested on Fixing Potential Issues

I haven't found any workaround for it yet, besides removing the stopPropagation() that will not work for my use case.

lakerswgq commented 3 years ago

any progress on this issue? having the same problem