{"record":{"id":"a2e3c250cd2a06a4","repo":"yewstack/yew","slug":"event-should-have-a-target-when-dispatched-a2e3c2","errorCode":null,"errorMessage":"Event should have a target when dispatched","messagePattern":"Event should have a target when dispatched","errorType":"panic","errorClass":null,"httpStatus":null,"severity":"error","filePath":"website/versioned_docs/version-0.23/concepts/html/events.mdx","lineNumber":155,"sourceCode":"        Callback::from(move |e: Event| {\n            // When events are created the target is undefined, it's only\n            // when dispatched does the target get added.\n            let target: Option<EventTarget> = e.target();\n            // Events can bubble so this listener might catch events from child\n            // elements which are not of type HtmlInputElement\n            //highlight-next-line\n            let input = target.and_then(|t| t.dyn_into::<HtmlInputElement>().ok());\n\n            if let Some(input) = input {\n                input_value_handle.set(input.value());\n            }\n        })\n    };\n\n    let on_dangerous_change = Callback::from(move |e: Event| {\n        let target: EventTarget = e\n            .target()\n            .expect(\"Event should have a target when dispatched\");\n        // You must KNOW target is a HtmlInputElement, otherwise\n        // the call to value would be Undefined Behaviour (UB).\n        // Here we are sure that this is input element so we can convert it to the appropriate type without checking\n        //highlight-next-line\n        input_value_handle.set(target.unchecked_into::<HtmlInputElement>().value());\n    });\n\n    html! {\n        <>\n            <label for=\"cautious-input\">\n                { \"My cautious input:\" }\n                <input onchange={on_cautious_change}\n                    id=\"cautious-input\"\n                    type=\"text\"\n                    value={input_value.clone()}\n                />\n            </label>\n            <label for=\"dangerous-input\">","sourceCodeStart":137,"sourceCodeEnd":173,"githubUrl":"https://github.com/yewstack/yew/blob/0e4a05472fac4e5fce1befe60fa4a1e43a36b6a3/website/versioned_docs/version-0.23/concepts/html/events.mdx#L137-L173","documentation":"This panic is the `.expect(\"Event should have a target when dispatched\")` on `Event::target()` in Yew 0.23's events guide, same listing as 0.21/0.22. `Event::target()` returns `Option<EventTarget>`; the DOM permits targetless events (constructed but undispatched, or window-dispatched), and Yew hands the raw browser event to the `Callback<Event>`. A None target panics here. Real user-driven `change` events on the `<input>` always have a target, so this panic indicates synthetic or test-driven events.","triggerScenarios":"Tests calling the `on_dangerous_change` callback with an `Event::new(...)` value (target None); dispatching `change` on `window` via `dispatchEvent`; retargeted events from shadow-DOM test utilities.","commonSituations":"Copy-pasting the events.mdx `unchecked_into` recipe (line ~155) from the 0.23 docs; headless test suites synthesizing input events.","solutions":["Handle the Option: `let Some(target) = e.target() else { return; };`","Prefer `e.target_dyn_into::<HtmlInputElement>()` (presence + type check, as the same guide teaches)","Dispatch test events from the real input element"],"exampleFix":"// before\nlet target: EventTarget = e\n    .target()\n    .expect(\"Event should have a target when dispatched\");\ninput_value_handle.set(target.unchecked_into::<HtmlInputElement>().value());\n\n// after\nif let Some(input) = e.target_dyn_into::<HtmlInputElement>() {\n    input_value_handle.set(input.value());\n}","handlingStrategy":"type-guard","validationCode":"let on_dangerous_change = Callback::from(move |e: Event| {\n    let Some(target) = e.target() else {\n        return;\n    };\n    let _ = target;\n});","typeGuard":"use web_sys::{Event, HtmlInputElement};\n\nfn input_target(e: &Event) -> Option<HtmlInputElement> {\n    e.target_dyn_into::<HtmlInputElement>()\n}","tryCatchPattern":null,"preventionTips":["Use target_dyn_into::<HtmlInputElement>() — it replaces both the target expect and the unchecked_into UB risk","Dispatch synthetic change events from the input element in tests","Keep event helpers centralized so handlers never inline expect chains"],"tags":["yew","events","option-expect","wasm","panic"],"backgroundTag":"event-target-missing","analyzedSha":"0e4a05472fac4e5fce1befe60fa4a1e43a36b6a3","analyzedAt":"2026-08-22T21:16:31.212Z","schemaVersion":2},"datasetVersion":"2026-08-23T01:17:44.959Z"}