feat: select figured out

packages/web/examples/basic.rs

@@ -26,39 +26,48 @@ static APP: FC<()> = |cx, props| {
     let mut count = use_state(cx, || 3);
 
     cx.render(rsx! {
-        button {
+        div {
-            // onclick: move |_| count += 1,
+            button {
-            onmouseover: move |_| count += 5,
+                onclick: move |_| count += 1,
-            onmouseout: move |_| count -= 5,
+                "Click to add."
-            "Click to add."
+                "Current count: {count}"
-            "Current count: {count}"
+            }
+            select {
+                name:"cars"
+                id:"cars"
+                oninput: move |ev| {
+                    match ev.value().as_str() {
+                        "h1" => count.set(0),
+                        "h2" => count.set(5),
+                        "h3" => count.set(10),
+                        s => {
+                            log::debug!("real value is {}", s);
+                        }
+                    }
+                },
+                option { value: "h1", "h1" }
+                option { value: "h2", "h2" }
+                option { value: "h3", "h3" }
+            }
+
+            ul {
+                {(0..*count).map(|f| rsx!{
+                    li { "a - {f}" }
+                    li { "b - {f}" }
+                    li { "c - {f}" }
+                })}
+            }
+            Child {}
         }
-        // div {
-        //     button {
-        //         onclick: move |_| count += 1,
-        //         "Click to add."
-        //         "Current count: {count}"
-        //     }
-        //     ul {
-        //         {(0..*count).map(|f| rsx!{
-        //             li { "a - {f}" }
-        //             li { "b - {f}" }
-        //             li { "c - {f}" }
-        //         })}
-        //     }
-        //     Child {}
-        // }
     })
 };
 
-// static Child: FC<()> = |cx, props| {
+static Child: FC<()> = |cx, props| {
-//     cx.render(rsx! {
+    cx.render(rsx! {
-//         div {
+        div {
-//             div {
+            div {
-//                 div {
+                "hello child"
-//                     "hello child"
+            }
-//                 }
+        }
-//             }
+    })
-//         }
+};
-//     })
-// };

packages/web/src/dom.rs

@@ -445,7 +445,7 @@ fn virtual_event_from_websys_event(event: web_sys::Event) -> SyntheticEvent {
             SyntheticEvent::ClipboardEvent(ClipboardEvent(Rc::new(WebsysClipboardEvent(event))))
         }
         "compositionend" | "compositionstart" | "compositionupdate" => {
-            let evt: web_sys::CompositionEvent = event.clone().dyn_into().unwrap();
+            let evt: web_sys::CompositionEvent = event.dyn_into().unwrap();
             SyntheticEvent::CompositionEvent(CompositionEvent(Rc::new(WebsysCompositionEvent(evt))))
         }
         "keydown" | "keypress" | "keyup" => {
@@ -461,57 +461,57 @@ fn virtual_event_from_websys_event(event: web_sys::Event) -> SyntheticEvent {
             SyntheticEvent::GenericEvent(GenericEvent(Rc::new(WebsysGenericUiEvent(evt))))
         }
         "input" | "invalid" | "reset" | "submit" => {
-            let evt: web_sys::InputEvent = event.clone().dyn_into().unwrap();
+            let evt: web_sys::Event = event.dyn_into().unwrap();
             SyntheticEvent::FormEvent(FormEvent(Rc::new(WebsysFormEvent(evt))))
         }
         "click" | "contextmenu" | "doubleclick" | "drag" | "dragend" | "dragenter" | "dragexit"
         | "dragleave" | "dragover" | "dragstart" | "drop" | "mousedown" | "mouseenter"
         | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" => {
-            let evt: web_sys::MouseEvent = event.clone().dyn_into().unwrap();
+            let evt: web_sys::MouseEvent = event.dyn_into().unwrap();
             SyntheticEvent::MouseEvent(MouseEvent(Rc::new(WebsysMouseEvent(evt))))
         }
         "pointerdown" | "pointermove" | "pointerup" | "pointercancel" | "gotpointercapture"
         | "lostpointercapture" | "pointerenter" | "pointerleave" | "pointerover" | "pointerout" => {
-            let evt: web_sys::PointerEvent = event.clone().dyn_into().unwrap();
+            let evt: web_sys::PointerEvent = event.dyn_into().unwrap();
             SyntheticEvent::PointerEvent(PointerEvent(Rc::new(WebsysPointerEvent(evt))))
         }
         "select" => {
-            let evt: web_sys::UiEvent = event.clone().dyn_into().unwrap();
+            let evt: web_sys::UiEvent = event.dyn_into().unwrap();
             SyntheticEvent::SelectionEvent(SelectionEvent(Rc::new(WebsysGenericUiEvent(evt))))
         }
         "touchcancel" | "touchend" | "touchmove" | "touchstart" => {
-            let evt: web_sys::TouchEvent = event.clone().dyn_into().unwrap();
+            let evt: web_sys::TouchEvent = event.dyn_into().unwrap();
             SyntheticEvent::TouchEvent(TouchEvent(Rc::new(WebsysTouchEvent(evt))))
         }
         "scroll" => {
-            let evt: web_sys::UiEvent = event.clone().dyn_into().unwrap();
+            let evt: web_sys::UiEvent = event.dyn_into().unwrap();
             SyntheticEvent::GenericEvent(GenericEvent(Rc::new(WebsysGenericUiEvent(evt))))
         }
         "wheel" => {
-            let evt: web_sys::WheelEvent = event.clone().dyn_into().unwrap();
+            let evt: web_sys::WheelEvent = event.dyn_into().unwrap();
             SyntheticEvent::WheelEvent(WheelEvent(Rc::new(WebsysWheelEvent(evt))))
         }
         "animationstart" | "animationend" | "animationiteration" => {
-            let evt: web_sys::AnimationEvent = event.clone().dyn_into().unwrap();
+            let evt: web_sys::AnimationEvent = event.dyn_into().unwrap();
             SyntheticEvent::AnimationEvent(AnimationEvent(Rc::new(WebsysAnimationEvent(evt))))
         }
         "transitionend" => {
-            let evt: web_sys::TransitionEvent = event.clone().dyn_into().unwrap();
+            let evt: web_sys::TransitionEvent = event.dyn_into().unwrap();
             SyntheticEvent::TransitionEvent(TransitionEvent(Rc::new(WebsysTransitionEvent(evt))))
         }
         "abort" | "canplay" | "canplaythrough" | "durationchange" | "emptied" | "encrypted"
         | "ended" | "error" | "loadeddata" | "loadedmetadata" | "loadstart" | "pause" | "play"
         | "playing" | "progress" | "ratechange" | "seeked" | "seeking" | "stalled" | "suspend"
         | "timeupdate" | "volumechange" | "waiting" => {
-            let evt: web_sys::UiEvent = event.clone().dyn_into().unwrap();
+            let evt: web_sys::UiEvent = event.dyn_into().unwrap();
             SyntheticEvent::MediaEvent(MediaEvent(Rc::new(WebsysMediaEvent(evt))))
         }
         "toggle" => {
-            let evt: web_sys::UiEvent = event.clone().dyn_into().unwrap();
+            let evt: web_sys::UiEvent = event.dyn_into().unwrap();
             SyntheticEvent::ToggleEvent(ToggleEvent(Rc::new(WebsysToggleEvent(evt))))
         }
         _ => {
-            let evt: web_sys::UiEvent = event.clone().dyn_into().unwrap();
+            let evt: web_sys::UiEvent = event.dyn_into().unwrap();
             SyntheticEvent::GenericEvent(GenericEvent(Rc::new(WebsysGenericUiEvent(evt))))
         }
     }

packages/web/src/events.rs

@@ -241,7 +241,7 @@ impl SelectionEventInner for WebsysGenericUiEvent {}
 pub struct WebsysFocusEvent(pub web_sys::FocusEvent);
 impl FocusEventInner for WebsysFocusEvent {}
 
-pub struct WebsysFormEvent(pub web_sys::InputEvent);
+pub struct WebsysFormEvent(pub web_sys::Event);
 impl FormEventInner for WebsysFormEvent {
     // technically a controlled component, so we need to manually grab out the target data
     fn value(&self) -> String {
@@ -254,6 +254,12 @@ impl FormEventInner for WebsysFormEvent {
                         .dyn_ref()
                         .map(|input: &web_sys::HtmlTextAreaElement| input.value())
                 })
+                // select elements are NOT input events - because - why woudn't they be??
+                .or_else(|| {
+                    this
+                        .dyn_ref()
+                        .map(|input: &web_sys::HtmlSelectElement| input.value())
+                })
                 .or_else(|| {
                     this
                         .dyn_ref::<web_sys::HtmlElement>()