Reset Select component correctly in Firefox/Edge

examples/showcase/src/main.rs

@@ -67,6 +67,7 @@ struct Model {
 
 enum Msg {
     SwitchTo(Scene),
+    Reset,
 }
 
 impl Component for Model {
@@ -83,6 +84,10 @@ impl Component for Model {
                 self.scene = Some(scene);
                 true
             }
+            Msg::Reset => {
+                self.scene = None;
+                true
+            }
         }
     }
 
@@ -96,6 +101,9 @@ impl Component for Model {
                         selected=self.scene.clone()
                         options=Scene::iter().collect::<Vec<_>>()
                         onchange=self.link.callback(Msg::SwitchTo) />
+                    <button onclick=self.link.callback(|_| Msg::Reset)>
+                        { "Reset" }
+                    </button>
                 </div>
                 <div id="right_pane">
                     { self.view_scene() }
@@ -135,10 +143,10 @@ impl Model {
     fn view_style(&self) -> &str {
         if let Some(scene) = self.scene.as_ref() {
             match scene {
-                Scene::GameOfLife => { include_str!("../../game_of_life/static/styles.css") },
-                Scene::LargeTable => { include_str!("../../large_table/static/styles.css") },
-                Scene::Todomvc => { include_str!("../static/todomvc.css") },
-                _ => { "" },
+                Scene::GameOfLife => include_str!("../../game_of_life/static/styles.css"),
+                Scene::LargeTable => include_str!("../../large_table/static/styles.css"),
+                Scene::Todomvc => include_str!("../static/todomvc.css"),
+                _ => "",
             }
         } else {
             ""

src/components/select.rs

@@ -33,14 +33,23 @@
 //! ```
 
 use crate::callback::Callback;
-use crate::html::{ChangeData, Component, ComponentLink, Html, ShouldRender};
+use crate::html::{ChangeData, Component, ComponentLink, Html, NodeRef, ShouldRender};
 use crate::macros::{html, Properties};
+use cfg_if::cfg_if;
 use cfg_match::cfg_match;
+cfg_if! {
+    if #[cfg(feature = "std_web")] {
+        use stdweb::web::html_element::SelectElement;
+    } else if #[cfg(feature = "web_sys")] {
+        use web_sys::HtmlSelectElement as SelectElement;
+    }
+}
 
 /// `Select` component.
 #[derive(Debug)]
 pub struct Select<T: ToString + PartialEq + Clone + 'static> {
     props: Props<T>,
+    select_ref: NodeRef,
     link: ComponentLink<Self>,
 }
 
@@ -75,7 +84,11 @@ where
     type Properties = Props<T>;
 
     fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
-        Self { props, link }
+        Self {
+            props,
+            select_ref: NodeRef::default(),
+            link,
+        }
     }
 
     fn update(&mut self, msg: Self::Message) -> ShouldRender {
@@ -93,6 +106,19 @@ where
     }
 
     fn change(&mut self, props: Self::Properties) -> ShouldRender {
+        if self.props.selected != props.selected {
+            if let Some(select) = self.select_ref.cast::<SelectElement>() {
+                let val = props
+                    .selected
+                    .as_ref()
+                    .map(|v| v.to_string())
+                    .unwrap_or_default();
+                cfg_match! {
+                    feature = "std_web" => select.set_raw_value(&val),
+                    feature = "web_sys" => select.set_value(&val),
+                }
+            }
+        }
         self.props = props;
         true
     }
@@ -102,13 +128,13 @@ where
         let view_option = |value: &T| {
             let flag = selected == Some(value);
             html! {
-                <option selected=flag>{ value.to_string() }</option>
+                <option value=value.to_string() selected=flag>{ value.to_string() }</option>
             }
         };
 
         html! {
-            <select disabled=self.props.disabled onchange=self.onchange()>
-                <option disabled=true selected=selected.is_none()>
+            <select ref=self.select_ref.clone() disabled=self.props.disabled onchange=self.onchange()>
+                <option value="" disabled=true selected=selected.is_none()>
                     { "↪" }
                 </option>
                 { for self.props.options.iter().map(view_option) }