Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#98 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
78/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
javascript, react, typescript
Área
frontend, testing

Línea de trabajo

Empieza en src/dom/synthetic-event.ts, en createSyntheticEvent, y lee cómo copia los campos del evento nativo. Reproduce los valores que faltan de clipboardData o dataTransfer con el ejemplo de Vitest y Testing Library del issue. La tarea estará terminada cuando los handlers reciban esos valores en las pruebas y el comportamiento actual de los eventos sintéticos siga funcionando.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
408
Forks
13
Merge medio
1 h 44 min
PR fusionados (30 d)
21

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de TanStack/redact

Todos los issues de TanStack/redact

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.