fix: copy non-enumerable Event fields into synthetic events

.changeset/synthetic-event-inherited-fields.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/redact': patch
+---
+
+Copy non-enumerable Event fields into synthetic events. DOM implementations such as happy-dom define `type`, `target`, `currentTarget` and `composedPath` as non-enumerable accessors, so handlers saw them as `undefined` and controlled inputs never read `e.target.value` in happy-dom test suites.

packages/redact/src/dom/synthetic-event.ts

@@ -12,10 +12,15 @@ export function createSyntheticEvent(native: Event) {
     stopImmediatePropagation() { stopped = true; native.stopImmediatePropagation() },
     persist() {},
   }
-  for (const key in native) {
-    if (!(key in event)) {
-      const value = (native as any)[key]
-      event[key] = isFunction(value) ? value.bind(native) : value
+  // Walk the prototype chain instead of `for…in`: DOM implementations such as
+  // happy-dom define `type`, `target` and other Event fields as non-enumerable
+  // accessors. Object.prototype names are already `in event`, so they are skipped.
+  for (let o: object | null = native; o; o = Object.getPrototypeOf(o)) {
+    for (const key of Object.getOwnPropertyNames(o)) {
+      if (!(key in event)) {
+        const value = (native as any)[key]
+        event[key] = isFunction(value) ? value.bind(native) : value
+      }
     }
   }
   return event

scripts/size-check.mjs

@@ -63,11 +63,17 @@ const STORE_HYDRATION_SIZE_ALLOWANCE = {
   'redact/dom-client (hydration=stub)': [3, 0],
 }
 
+// Synthetic events read non-enumerable Event fields (happy-dom) on main 37c051c.
+// Only the entry exceeding its limit receives the measured increment.
+const EVENT_FIELDS_SIZE_ALLOWANCE = {
+  'redact/dom-client (hydration=stub)': [29, 32],
+}
+
 let failed = false
 for (const tree of ['src', 'dist']) {
   for (const row of await measureSizes(tree)) {
     const baseBudget = BUDGETS[row.name]
-    const budget = baseBudget === undefined ? undefined : baseBudget + (STORE_HYDRATION_SIZE_ALLOWANCE[row.name]?.[tree === 'src' ? 0 : 1] ?? 0) + (ROOT_TRANSITION_SIZE_ALLOWANCE[row.name]?.[tree === 'src' ? 0 : 1] ?? 0) + (QUEUE_SIZE_ALLOWANCE[row.name]?.[tree === 'src' ? 0 : 1] ?? 0)
+    const budget = baseBudget === undefined ? undefined : baseBudget + (STORE_HYDRATION_SIZE_ALLOWANCE[row.name]?.[tree === 'src' ? 0 : 1] ?? 0) + (ROOT_TRANSITION_SIZE_ALLOWANCE[row.name]?.[tree === 'src' ? 0 : 1] ?? 0) + (QUEUE_SIZE_ALLOWANCE[row.name]?.[tree === 'src' ? 0 : 1] ?? 0) + (EVENT_FIELDS_SIZE_ALLOWANCE[row.name]?.[tree === 'src' ? 0 : 1] ?? 0)
     const ok = budget !== undefined && row.gz <= budget
     failed ||= !ok
     console.log(`${ok ? 'PASS' : 'FAIL'} ${tree} ${row.name}: ${row.gz} B gzip, budget ${budget ?? 'missing'}`)

tests/package.json

@@ -12,6 +12,7 @@
   },
   "devDependencies": {
     "@vitest/browser": "^2.1.8",
+    "happy-dom": "^21.0.4",
     "jsdom": "^25.0.1",
     "preact": "10.29.1",
     "preact-render-to-string": "^6.5.0",

tests/synthetic-event-happy-dom.test.tsx

@@ -0,0 +1,74 @@
+// @vitest-environment happy-dom
+/**
+ * happy-dom defines Event fields such as `type`, `target` and `currentTarget`
+ * as non-enumerable class accessors. Synthetic events must still expose them,
+ * or controlled inputs never see `e.target.value` in happy-dom test suites.
+ */
+import { describe, it, expect } from 'vitest'
+import * as React from 'react'
+import { createRoot } from 'react-dom/client'
+import { flushSync } from 'react-dom'
+
+function setup() {
+  const c = document.createElement('div')
+  document.body.appendChild(c)
+  return c
+}
+
+describe('synthetic events in happy-dom', () => {
+  it('keeps the base Event fields happy-dom does not enumerate', () => {
+    expect(Object.keys(Event.prototype)).not.toContain('target')
+    const container = setup()
+    let captured: any = null
+    function App() {
+      const [v, setV] = React.useState('')
+      return (
+        <input
+          value={v}
+          onChange={(e: any) => {
+            captured = e
+            setV(e.target.value)
+          }}
+        />
+      )
+    }
+    flushSync(() => createRoot(container).render(<App />))
+    const input = container.querySelector('input')!
+    flushSync(() => {
+      input.value = 'a'
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+    })
+    expect(captured.type).toBe('input')
+    expect(captured.target).toBe(input)
+    expect(captured.bubbles).toBe(true)
+    expect(captured.composedPath()[0]).toBe(input)
+    expect(input.value).toBe('a')
+  })
+
+  it('reads subclass fields and currentTarget on a bubbled click', () => {
+    const container = setup()
+    let captured: any = null
+    let currentTarget: unknown = null
+    function App() {
+      return (
+        <div
+          onClick={(e: any) => {
+            captured = e
+            currentTarget = e.currentTarget
+          }}
+        >
+          <button>go</button>
+        </div>
+      )
+    }
+    flushSync(() => createRoot(container).render(<App />))
+    const button = container.querySelector('button')!
+    flushSync(() => {
+      button.dispatchEvent(new MouseEvent('click', { bubbles: true, shiftKey: true }))
+    })
+    expect(captured.type).toBe('click')
+    expect(captured.target).toBe(button)
+    expect(currentTarget).toBe(container.firstChild)
+    expect(captured.shiftKey).toBe(true)
+  })
+})