DioxusLabs/dioxus · error

only an InputElement or TextAreaElement or an element with c

Error message

only an InputElement or TextAreaElement or an element with contenteditable=true can have an oninput event listener

What it means

In the WASM renderer, the `value()` attached to input-family events (`oninput`, `onchange`, `onbeforeinput`, ...) is resolved by `editable_element_value`, which supports `<input>` (checkbox values coerced to "true"/"false"), `<textarea>`, `<select>`, and contenteditable elements via textContent. If the event target is none of these, the helper returns None and `.expect(...)` panics, which surfaces as an unrecoverable Rust panic that kills the WASM app in the browser.

Source

Thrown at packages/web/src/events/form.rs:32

impl WebEventExt for dioxus_html::FormData {
    type WebEvent = Event;

    #[inline(always)]
    fn try_as_web_event(&self) -> Option<Self::WebEvent> {
        self.downcast::<Event>().cloned()
    }
}

impl WebFormData {
    pub fn new(element: Element, event: Event) -> Self {
        Self { element, event }
    }
}

impl HasFormData for WebFormData {
    fn value(&self) -> String {
        super::editable_element_value(&self.element)
            .expect("only an InputElement or TextAreaElement or an element with contenteditable=true can have an oninput event listener")
    }

    fn values(&self) -> Vec<(String, FormValue)> {
        let mut values = Vec::new();

        // try to fill in form values
        if let Some(form) = self.element.dyn_ref::<web_sys::HtmlFormElement>() {
            let form_data = web_sys::FormData::new_with_form(form).unwrap();

            for entry in form_data.entries().into_iter().flatten() {
                if let Ok(array) = entry.dyn_into::<Array>()
                    && let Some(name) = array.get(0).as_string()
                {
                    let value = array.get(1);
                    if let Some(file) = value.dyn_ref::<web_sys::File>() {
                        if file.name().is_empty() {
                            values.push((name, FormValue::File(None)));
                        } else {

View on GitHub (pinned to 393d190a80)

Solutions

1. Attach `oninput` only to real editable elements: input, textarea, select, or an element with contenteditable=true
2. For custom components that re-dispatch input events, dispatch from the editable element itself or use a custom event name instead of `input`
3. Before calling `event.value()`, downcast via `WebEventExt::try_as_web_event` and verify the target element type
4. Upgrade dioxus-web - value resolution has been progressively broadened (select and textContent fallbacks were added), so newer releases panic on fewer targets

Example fix

// before: oninput on a div; e.value() panics when the event fires
rsx! { div { oninput: move |e| log(e.value()), "custom editor" } }
// after: use a real editable element
rsx! { input { oninput: move |e| log(e.value()) } }

// inside an oninput-family handler, before touching e.value()
use dioxus_web::WebEventExt;
if let Some(ev) = e.try_as_web_event() {
    if let Some(target) = ev.target().and_then(|t| t.dyn_into::<web_sys::Element>().ok()) {
        if !is_editable_element(&target) { return; }
    }
}
log(e.value());

fn is_editable_element(el: &web_sys::Element) -> bool {
    use wasm_bindgen::JsCast;
    el.is_instance_of::<web_sys::HtmlInputElement>()
        || el.is_instance_of::<web_sys::HtmlTextAreaElement>()
        || el.is_instance_of::<web_sys::HtmlSelectElement>()
        || el.dyn_ref::<web_sys::HtmlElement>()
            .map(|h| h.is_content_editable())
            .unwrap_or(false)
}

When it happens

Trigger: An `input` event reaching Dioxus with a non-editable target: `oninput` attached to a `div`/`span` with the event fired by synthetic dispatch (`el.dispatchEvent(new Event("input"))`), a third-party web component that re-dispatches input events from a container element, or shadow-DOM event retargeting that makes a non-editable host the target (including SVG/MathML nodes that cannot cast to HtmlElement).

Common situations: Wrapping JavaScript UI kits inside Dioxus; hand-rolled event delegation that synthesizes input events; test harnesses dispatching generic input events on arbitrary nodes.

Related errors

• should have access to the Window
• should have access to the Document
• access to `window`
• todo: convert_resize_data in dioxus-native. requires support
• todo: convert_visible_data in dioxus-native. requires suppor

AI-assisted analysis of DioxusLabs/dioxus@393d190a80 (2026-08-16). Data as JSON: /api/errors/a73a220cf0b3b5c0. Report an issue: GitHub.