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

未关闭
  • 哪里不对？
#119 2 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
38/100
Issue 类型
缺陷
描述清晰度
基本清楚
活跃度
活跃
技术栈
javascript, react
领域
frontend

调研方向

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.

由索引模型根据 Issue 内容生成。

描述

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.

主要语言
TypeScript
星标
537
派生
22
平均合并
11 小时 28 分钟
30 天内合并 PR
34

环境准备

这个项目没有提供开发容器、Dockerfile 或贡献指南，环境需要你自己搭建：先看它的 README，通用步骤见我们的新手贡献指南。

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

TanStack/redact 的其他 Issue

查看 TanStack/redact 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。