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

Offen
  • Stimmt etwas nicht?
#119 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
38/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Aktiv
Tech-Stack
javascript, react
Bereich
frontend

Rechercherichtung

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.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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.

Vorherrschende Sprache
TypeScript
Sterne
537
Forks
22
Ø Merge
11 Std. 28 Min.
Gemergte PRs (30 T.)
34

Entwicklungsumgebung

Dieses Projekt bietet weder Dev-Container noch Dockerfile noch Beitragsleitfaden – die Einrichtung liegt bei Ihnen. Beginnen Sie mit der README; die allgemeinen Schritte stehen in unserem Leitfaden für den ersten Beitrag.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus TanStack/redact

Alle Issues in TanStack/redact

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.