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

Aperta
  • Qualcosa non va?
#119 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
38/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
javascript, react
Ambito
frontend

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.

Lingua principale
TypeScript
Stelle
537
Fork
22
Merge medio
11h 28m
PR unite (30g)
34

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di TanStack/redact

Tutte le issue di TanStack/redact

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.