Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#98 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
78/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
javascript, react, typescript
Lĩnh vực
frontend, testing

Hướng nghiên cứu

Bắt đầu tại src/dom/synthetic-event.ts, ở createSyntheticEvent, và đọc cách hàm này sao chép các trường từ sự kiện gốc. Dùng ví dụ Vitest và Testing Library trong issue để tái hiện các giá trị còn thiếu của clipboardData hoặc dataTransfer. Hoàn tất khi các handler nhận được những giá trị đó trong các bài kiểm thử và hành vi hiện có của sự kiện tổng hợp vẫn hoạt động.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
TypeScript
Star
408
Fork
13
Merge trung bình
1 giờ 44 phút
Pull request đã merge (30 ngày)
21

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của TanStack/redact

Tất cả issue của TanStack/redact

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.