Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

Synthetic events drop non-enumerable fields (clipboardData/dataTransfer from Testing Library are undefined)

未关闭 适合新手
  • 哪里不对？
#98 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
2/5
预计耗时
1-3 小时
新手友好度
78/100
Issue 类型
缺陷
描述清晰度
描述清楚
活跃度
活跃
技术栈
javascript, react, typescript
领域
frontend, testing

调研方向

从 src/dom/synthetic-event.ts 中的 createSyntheticEvent 开始，查看它如何从原生事件复制字段。使用 issue 中的 Vitest 和 Testing Library 示例，重现缺失的 clipboardData 或 dataTransfer 值。当处理程序在测试中收到这些值，且现有的合成事件行为仍然正常时，即表示完成。

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

描述

Version: @tanstack/redact 0.2.2

createSyntheticEvent (src/dom/synthetic-event.ts) copies the native event's fields with for (const key in native). That only sees enumerable properties. Own properties defined with Object.defineProperty (non-enumerable by default) are dropped, so the handler gets undefined where React hands over the value.

In real browsers this is fine for native events: WebIDL attributes such as ClipboardEvent.clipboardData and DragEvent.dataTransfer are enumerable accessors on the prototype (checked in Chromium). It breaks for:

  • Testing Library / jsdom: fireEvent.paste(el, { clipboardData }) and fireEvent.drop(el, { dataTransfer }) assign those fields with Object.defineProperty, because jsdom has no ClipboardEvent/DragEvent data. Paste and drop tests that pass under React fail under Redact.
  • Any library or app code that dispatches a plain Event and attaches data the same way.
Repro (Vitest + jsdom + Testing Library)
import { render, fireEvent } from "@testing-library/react";

it("handlers see non-enumerable event fields", () => {
  let pasted: unknown;
  const { getByRole } = render(
    <textarea onPaste={(e) => { pasted = e.clipboardData?.getData("text/plain"); }} />,
  );
  fireEvent.paste(getByRole("textbox"), { clipboardData: { getData: () => "hello" } });

  let dropped: unknown;
  const { container } = render(<div onDrop={(e) => { dropped = e.dataTransfer?.getData("text"); }} />);
  const ev = new Event("drop", { bubbles: true });
  Object.defineProperty(ev, "dataTransfer", { value: { getData: () => "dropped" } });
  container.firstChild!.dispatchEvent(ev);

  expect(pasted).toBe("hello");
  expect(dropped).toBe("dropped");
});
pasted dropped
React 19 "hello" "dropped"
Redact 0.2.2 undefined undefined
Suggestion

Also copy own non-enumerable properties (Object.getOwnPropertyNames(native)), or read fields lazily from nativeEvent (a getter or Proxy fallback) the way React's per-interface getters read nativeEvent.clipboardData / dataTransfer directly.

Found while running a TanStack Start app's component tests (chat composer paste and image drop) under Redact.

主要语言
TypeScript
星标
408
派生
13
平均合并
1 小时 47 分钟
30 天内合并 PR
22

环境准备

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

从这里开始

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

TanStack/redact 的其他 Issue

查看 TanStack/redact 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

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