Events inside a portal don't bubble to the portal's React parents

Abierto
  • ¿Algo no está bien?
#119 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
38/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
javascript, react
Área
frontend

Línea de trabajo

Start with createPortal in the Redact implementation and the event wrapping in synthetic-event.js; compare how handlers are attached and how propagation across the React tree is represented. Reproduce with the issue's one-parent, one-portal StackBlitz case, then verify portal clicks reach the parent and the Radix popover/dialog case behaves like React DOM. Also check SURFACE.md and the compatibility documentation for the documented portal guarantees.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

In React DOM, an event fired inside a portal bubbles through the React tree, so the component that renders the portal receives it. In Redact the event bubbles only through the DOM tree, so no React parent of the portal sees it.

Reproduction

Both links open the same StackBlitz project, so you install nothing. They differ only in the start script:

Redact React DOM
Both cases fail on Redact Both cases pass on React DOM

The smallest case is one parent with one portal:

import { useState } from 'react'
import { createPortal } from 'react-dom'

function App() {
	const [clicks, setClicks] = useState(0)
	return (
		<div onClick={() => setClicks((n) => n + 1)}>
			<p>Parent saw {clicks} clicks</p>
			{createPortal(<button>Inside portal</button>, document.body)}
		</div>
	)
}

Expected. Each click on Inside portal reaches the parent, as it does in React DOM.

Actual. In Redact the parent sees 0 clicks.

I get the same result in Chromium and WebKit, with real Playwright clicks on production builds and by hand on the StackBlitz links.

Impact on headless UI libraries

Libraries decide whether a click lands inside or outside a layer through events that cross the portal. Without React-tree bubbling, a layer nested in a portal counts its own clicks as outside:

  • Radix. Clicking an item of a Popover inside a Dialog closes the Dialog. DismissableLayer marks a pointer press as inside through its onPointerDownCapture, and the popover content reaches that handler only through the React tree. The StackBlitz project shows this case with radix-ui 1.8.1.
  • Base UI. #70 looks like the same cause. A submenu in a portal closes on outside-press before its link gets the click.

Cause

In 0.2.3, createPortal only returns the element, and synthetic-event.js wraps the native event. Each handler listens on its own element, so the event follows the DOM tree. The compatibility docs list portals as supported, and SURFACE.md marks createPortal as basic. Neither page mentions that portal events follow the DOM tree.

Do you want Redact to match React here? If you do, I can send a PR once you pick the approach. If you don't, a line in the compatibility docs that says portal events follow the DOM tree would tell users what to expect.

Versions. Redact 0.2.3, radix-ui 1.8.1, React 19.2.0, Vite 8.3.5, @vitejs/plugin-react 6.1.2, Chromium 156.0.8078.4, and WebKit 27.2 from Playwright.

Lenguaje dominante
TypeScript
Estrellas
537
Forks
22
Merge medio
11 h 28 min
PR fusionados (30 d)
34

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de TanStack/redact

Todos los issues de TanStack/redact

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.