From ab4e37fbf2a5367b43aeb0ec1867a5535cd3a3a5 Mon Sep 17 00:00:00 2001 From: Joshua Kifer Date: Sat, 19 Mar 2022 12:24:29 -0600 Subject: [PATCH 1/2] Capture correct radio button value in a form input event --- packages/web/src/dom.rs | 26 +++++++++++++++++--------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/packages/web/src/dom.rs b/packages/web/src/dom.rs index 3ecfe9913..351189e2b 100644 --- a/packages/web/src/dom.rs +++ b/packages/web/src/dom.rs @@ -241,25 +241,33 @@ fn virtual_event_from_websys_event( for x in 0..elements.length() { let element = elements.item(x).unwrap(); if let Some(name) = element.get_attribute("name") { - let value: String = (&element) + let value: Option = (&element) .dyn_ref() .map(|input: &web_sys::HtmlInputElement| { + log::info!("Input type: {}", input.type_()); match input.type_().as_str() { "checkbox" => { match input.checked() { - true => "true".to_string(), - false => "false".to_string(), + true => Some("true".to_string()), + false => Some("false".to_string()), } }, - _ => input.value() + "radio" => { + match input.checked() { + true => Some(input.value()), + false => None, + } + } + _ => Some(input.value()) } }) - .or_else(|| target.dyn_ref().map(|input: &web_sys::HtmlTextAreaElement| input.value())) - .or_else(|| target.dyn_ref().map(|input: &web_sys::HtmlSelectElement| input.value())) - .or_else(|| target.dyn_ref::().unwrap().text_content()) + .or_else(|| target.dyn_ref().map(|input: &web_sys::HtmlTextAreaElement| Some(input.value()))) + .or_else(|| target.dyn_ref().map(|input: &web_sys::HtmlSelectElement| Some(input.value()))) + .or_else(|| Some(target.dyn_ref::().unwrap().text_content())) .expect("only an InputElement or TextAreaElement or an element with contenteditable=true can have an oninput event listener"); - - values.insert(name, value); + if let Some(value) = value { + values.insert(name, value); + } } } } From ae2e8a803895d561701462e3257c7747b280be10 Mon Sep 17 00:00:00 2001 From: Joshua Kifer Date: Sat, 19 Mar 2022 17:05:48 -0600 Subject: [PATCH 2/2] Add some radio buttons to the form example --- examples/form.rs | 2 ++ 1 file changed, 2 insertions(+) diff --git a/examples/form.rs b/examples/form.rs index 3637826da..3b8d470b3 100644 --- a/examples/form.rs +++ b/examples/form.rs @@ -20,6 +20,8 @@ fn app(cx: Scope) -> Element { input { r#type: "text", name: "username" } input { r#type: "text", name: "full-name" } input { r#type: "password", name: "password" } + input { r#type: "radio", name: "color", value: "red" } + input { r#type: "radio", name: "color", value: "blue" } button { r#type: "submit", value: "Submit", "Submit the form" } } }