Skip to content

Implement support for beforeinput event#5581

Merged
ealmloff merged 3 commits into
DioxusLabs:mainfrom
danielkov:beforeinput-event
Jun 2, 2026
Merged

Implement support for beforeinput event#5581
ealmloff merged 3 commits into
DioxusLabs:mainfrom
danielkov:beforeinput-event

Conversation

@danielkov

@danielkov danielkov commented May 23, 2026

Copy link
Copy Markdown
Contributor

Adds an onbeforeinput event handler that fires before an editable element is about to be modified. Unlike oninput, the event is cancellable: handlers can call event.prevent_default() to block the user agent from applying the change. Exposes input_type, data, is_composing, and the pre-change value.

What changed

  • BeforeInputData / HasBeforeInputData / SerializedBeforeInputData in dioxus-html.
  • convert_before_input_data plumbing in dioxus-desktop, dioxus-liveview, dioxus-native-dom (unimplemented stub), and dioxus-web (WebBeforeInputData reads value from <input>, <textarea>, <select>, or textContent).
  • JS serializer: emits input_type, is_composing, data only when event.type === "beforeinput", so existing oninput payloads are unchanged.
  • Headless tests covering plain <input>, IME composition (isComposing: true, non-ASCII data), and contenteditable <div>.
  • event_bubbles("beforeinput") => true to match the DOM spec.

Design decisions

input_type is required (not #[serde(default)]). EventData is an #[serde(untagged)] enum, so its derived Deserialize falls through variant-by-variant.

Reason: every existing variant has all-default fields and no deny_unknown_fields. Direct EventData::deserialize call matches the first variant by shape and silently drops the rest of the payload. This is existing behaviour. I filed an issue separately (#5582) and happy to move onto it next. Requiring input_type ties the BeforeInput variant to a field the browser always emits for InputEvent, so it acts as a discriminator. The happy path through HtmlEvent::deserialize routes by event name and never depends on this, but the public derived impl is now harder to misuse.

Drive-by textContent fallback in serializeInputEvent. Previously, calling event.value() from any input-shape handler (oninput, onchange, now onbeforeinput)

Previously returned "" on desktop/liveview for contenteditable elements, even though dioxus-web returned textContent via WebFormData::value / WebBeforeInputData::value. The JS serializer now mirrors the wasm renderer: if the target isn't an <input>/<textarea>/<select> but is an HTMLElement, contents.value falls back to target.textContent ?? "", yielding the same result regardless of renderer. This affects input, change, submit, reset, click, and beforeinput payloads on contenteditable targets. Happy to split this into a follow-up if you prefer.

Docs

The onbeforeinput rustdoc has a runnable example showing how to block digit insertion. Uses event.data.input_type() / event.data.data().

References

Adds onbeforeinput exposing inputType, data, isComposing and the
pre-change value. Cancellable via event.prevent_default().

The JS serializer gates the new fields on event.type === "beforeinput"
so payloads for oninput and the other callers of serializeInputEvent
are unchanged. SerializedBeforeInputData::input_type is required (no
serde default) to serve as the discriminator in the untagged EventData
enum.

Drive-by: serializeInputEvent now falls back to target.textContent for
HTMLElement targets when no form-control branch matches, mirroring
WebBeforeInputData::value / WebFormData::value. This closes a gap
where event.value() returned "" on desktop/liveview but textContent on
dioxus-web for contenteditable elements.
@danielkov danielkov requested a review from a team as a code owner May 23, 2026 14:24
@danielkov danielkov force-pushed the beforeinput-event branch from df9d953 to 4e36fb6 Compare May 23, 2026 14:28
@nicoburns nicoburns requested a review from ealmloff June 2, 2026 10:24
@ealmloff ealmloff added enhancement New feature or request breaking This is a breaking change html Related to the html crate labels Jun 2, 2026

@ealmloff ealmloff left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for picking this up! Overall looks good, but there is a bit of duplication around the input data and we could represent the types better for the input_type method

Comment thread packages/html/src/events/before_input.rs Outdated
Comment thread packages/web/src/events/before_input.rs
@ealmloff

ealmloff commented Jun 2, 2026

Copy link
Copy Markdown
Member

It would also be great to get this added to the all_events example we use for smoke testing events before a release

@danielkov danielkov requested a review from ealmloff June 2, 2026 15:20

@ealmloff ealmloff left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, looks great!

@ealmloff

ealmloff commented Jun 2, 2026

Copy link
Copy Markdown
Member

min dep failure in ci is unrelated. see #5609

@ealmloff ealmloff merged commit 5f82a0a into DioxusLabs:main Jun 2, 2026
19 of 21 checks passed
@danielkov danielkov deleted the beforeinput-event branch June 2, 2026 18:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

breaking This is a breaking change enhancement New feature or request html Related to the html crate

Projects

None yet

Development

Successfully merging this pull request may close these issues.

beforeinput event missing

2 participants