davidtheclark / davidtheclark/react-aria-modal
Clicking a portal inside the modal causes `onExit()` to fire.
- Dominant language
- JavaScript
- Stars
- 1k
- Forks
- 94
- PR merge metrics
- No merged PRs in 30d
Description
# Use Case
We have a case where we render a contextual menu inside of a modal dialogue. This menu is implemented as a portal (via [displaced](https://github.com/davidtheclark/react-displace)) and positioned with styling. When clicked, the modal closes.
# The Problem
It looks like the problem is that when a click event happens, a raw DOM [check is made](https://github.com/davidtheclark/react-aria-modal/blob/master/src/react-aria-modal.js#L74) to see if the clicked DOM node (within the portal) is a child of the modal DOM node.
The trouble is that the portal is a child in the "React" sense, but it is injected into the DOM as a child of the document, not a child of the modal.
# Solution
I've been trying to think of a way around this, both as a workaround or and improvement to `react-aria-modal`. One potential idea I had was to try and keep track of hover states, and keep a `this._isHovering` flag which would always be true if the hover event is a child, whether it is in a portal or not. Then we check the flag when a click event happens. Not completely sure on this one, but happy to submit a PR if someone can point me in the right direction.
Thanks for the awesome library!
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.