davidtheclark/react-aria-modal

Clicking a portal inside the modal causes `onExit()` to fire.

Open

#77 ouverte le 31 oct. 2018

Voir sur GitHub
 (6 commentaires) (0 réactions) (0 assignés)JavaScript (94 forks)github user discovery
help wanted

Métriques du dépôt

Stars
 (1 039 stars)
Métriques de merge PR
 (Métriques PR en attente)

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) 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 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!

Guide contributeur