{"record":{"id":"a73a220cf0b3b5c0","repo":"DioxusLabs/dioxus","slug":"only-an-inputelement-or-textareaelement-or-an-elem","errorCode":null,"errorMessage":"only an InputElement or TextAreaElement or an element with contenteditable=true can have an oninput event listener","messagePattern":"only an InputElement or TextAreaElement or an element with contenteditable=true can have an oninput event listener","errorType":"panic","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/web/src/events/form.rs","lineNumber":32,"sourceCode":"impl WebEventExt for dioxus_html::FormData {\n    type WebEvent = Event;\n\n    #[inline(always)]\n    fn try_as_web_event(&self) -> Option<Self::WebEvent> {\n        self.downcast::<Event>().cloned()\n    }\n}\n\nimpl WebFormData {\n    pub fn new(element: Element, event: Event) -> Self {\n        Self { element, event }\n    }\n}\n\nimpl HasFormData for WebFormData {\n    fn value(&self) -> String {\n        super::editable_element_value(&self.element)\n            .expect(\"only an InputElement or TextAreaElement or an element with contenteditable=true can have an oninput event listener\")\n    }\n\n    fn values(&self) -> Vec<(String, FormValue)> {\n        let mut values = Vec::new();\n\n        // try to fill in form values\n        if let Some(form) = self.element.dyn_ref::<web_sys::HtmlFormElement>() {\n            let form_data = web_sys::FormData::new_with_form(form).unwrap();\n\n            for entry in form_data.entries().into_iter().flatten() {\n                if let Ok(array) = entry.dyn_into::<Array>()\n                    && let Some(name) = array.get(0).as_string()\n                {\n                    let value = array.get(1);\n                    if let Some(file) = value.dyn_ref::<web_sys::File>() {\n                        if file.name().is_empty() {\n                            values.push((name, FormValue::File(None)));\n                        } else {","sourceCodeStart":14,"sourceCodeEnd":50,"githubUrl":"https://github.com/DioxusLabs/dioxus/blob/393d190a801ccb441d41923e232289b4f8a5c669/packages/web/src/events/form.rs#L14-L50","documentation":"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.","triggerScenarios":"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).","commonSituations":"Wrapping JavaScript UI kits inside Dioxus; hand-rolled event delegation that synthesizes input events; test harnesses dispatching generic input events on arbitrary nodes.","solutions":["Attach `oninput` only to real editable elements: input, textarea, select, or an element with contenteditable=true","For custom components that re-dispatch input events, dispatch from the editable element itself or use a custom event name instead of `input`","Before calling `event.value()`, downcast via `WebEventExt::try_as_web_event` and verify the target element type","Upgrade dioxus-web - value resolution has been progressively broadened (select and textContent fallbacks were added), so newer releases panic on fewer targets"],"exampleFix":"// before: oninput on a div; e.value() panics when the event fires\nrsx! { div { oninput: move |e| log(e.value()), \"custom editor\" } }\n// after: use a real editable element\nrsx! { input { oninput: move |e| log(e.value()) } }","handlingStrategy":"type-guard","validationCode":"// inside an oninput-family handler, before touching e.value()\nuse dioxus_web::WebEventExt;\nif let Some(ev) = e.try_as_web_event() {\n    if let Some(target) = ev.target().and_then(|t| t.dyn_into::<web_sys::Element>().ok()) {\n        if !is_editable_element(&target) { return; }\n    }\n}\nlog(e.value());","typeGuard":"fn is_editable_element(el: &web_sys::Element) -> bool {\n    use wasm_bindgen::JsCast;\n    el.is_instance_of::<web_sys::HtmlInputElement>()\n        || el.is_instance_of::<web_sys::HtmlTextAreaElement>()\n        || el.is_instance_of::<web_sys::HtmlSelectElement>()\n        || el.dyn_ref::<web_sys::HtmlElement>()\n            .map(|h| h.is_content_editable())\n            .unwrap_or(false)\n}","tryCatchPattern":null,"preventionTips":["Bind oninput-family handlers only to input, textarea, select, or contenteditable elements","Guard against third-party components that synthesize or re-dispatch input events from non-editable roots","Install a custom panic hook (`std::panic::set_hook`) in dev builds to log the offending element and handler for faster diagnosis","Stay current with dioxus-web releases - the set of supported event targets keeps expanding"],"tags":["dioxus-web","wasm","events","forms","oninput","panic","browser"],"backgroundTag":null,"analyzedSha":"393d190a801ccb441d41923e232289b4f8a5c669","analyzedAt":"2026-08-16T11:27:45.815Z","schemaVersion":2},"datasetVersion":"2026-08-16T13:17:31.715Z"}