davidtheclark/react-aria-modal

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

Open

#77 aberto em 31 de out. de 2018

Ver no GitHub
 (6 comments) (0 reactions) (0 assignees)JavaScript (94 forks)github user discovery
help wanted

Métricas do repositório

Stars
 (1.039 stars)
Métricas de merge de PR
 (Métricas PR pendentes)

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!

Guia do colaborador