Checkbox: Object.assign on read-only Event.target crashes onCheckedChange

[ilicfilip]

Description

The Checkbox component crashes when clicked due to Object.assign(event, { target: ... }) in the onCheckedChange handler. Event.target is a read-only getter property and cannot be set via Object.assign.

Error

Uncaught TypeError: Cannot set property target of #<Event> which has only a getter
    at Object.assign (<anonymous>)
    at Object.onCheckedChange (@cloudflare_kumo.js:4043:32)

Steps to Reproduce

1. Render a <Checkbox> component
2. Click on it
3. The onCheckedChange handler throws

Environment

• @cloudflare/kumo v1.18.0
• React 19.2.4
• Chrome (latest)

Expected Behavior

Checkbox should toggle without errors.

Actual Behavior

Throws TypeError: Cannot set property target of #<Event> which has only a getter on every click. The checkbox state does not change.

[singkia]

Confirmed this bug. The crash only occurs when using the deprecated onChange prop (the recommended onCheckedChange is unaffected).

Root cause: Object.assign(eventDetails.event, { target: ... }) at checkbox.tsx#L248 — Event.target is a read-only getter on native DOM events, so Object.assign throws TypeError.

Fix: Replaced with Object.create(eventDetails.event, { target: { value: { checked: newChecked } } }) which creates a new object shadowing the getter via an own property, while preserving all original event properties through the prototype chain.

PR: #415

[mattrothenberg]

We've opened an alternative approach in #416 that fixes this by removing the deprecated onChange prop entirely (along with onValueChange and onClick).

The crash was caused by the backwards-compatibility shim that tried to Object.assign onto the read-only event.target. By removing these deprecated props and aligning onCheckedChange directly with Base UI's signature, the bug goes away.

This is a breaking change, but the deprecated props have been marked as such for a while. The migration path is straightforward:

// Before (deprecated, and now crashes)
<Checkbox onChange={(e) => console.log(e.target.checked)} />

// After
<Checkbox onCheckedChange={(checked) => console.log(checked)} />

// If you need access to the event
<Checkbox onCheckedChange={(checked, { event }) => console.log(event)} />