fix the on double click event and depreciate ondblclick (#1743)

examples/all_events.rs

@@ -53,8 +53,7 @@ fn app(cx: Scope) -> Element {
     };
 
     cx.render(rsx! (
-        div {
-            style: "{CONTAINER_STYLE}",
+        div { style: "{CONTAINER_STYLE}",
             div {
                 style: "{RECT_STYLE}",
                 // focusing is necessary to catch keyboard events
@@ -62,7 +61,7 @@ fn app(cx: Scope) -> Element {
 
                 onmousemove: move |event| log_event(Event::MouseMove(event)),
                 onclick: move |event| log_event(Event::MouseClick(event)),
-                ondblclick: move |event| log_event(Event::MouseDoubleClick(event)),
+                ondoubleclick: move |event| log_event(Event::MouseDoubleClick(event)),
                 onmousedown: move |event| log_event(Event::MouseDown(event)),
                 onmouseup: move |event| log_event(Event::MouseUp(event)),
 
@@ -77,9 +76,7 @@ fn app(cx: Scope) -> Element {
 
                 "Hover, click, type or scroll to see the info down below"
             }
-            div {
-                events.read().iter().map(|event| rsx!( div { "{event:?}" } ))
-            },
-        },
+            div { events.read().iter().map(|event| rsx!( div { "{event:?}" } )) }
+        }
     ))
 }

examples/todomvc.rs

@@ -48,11 +48,8 @@ pub fn app(cx: Scope<()>) -> Element {
     cx.render(rsx! {
         section { class: "todoapp",
             style { include_str!("./assets/todomvc.css") }
-            TodoHeader {
-                todos: todos,
-            }
-            section {
-                class: "main",
+            TodoHeader { todos: todos }
+            section { class: "main",
                 if !todos.is_empty() {
                     rsx! {
                         input {
@@ -103,31 +100,34 @@ pub fn TodoHeader<'a>(cx: Scope<'a, TodoHeaderProps<'a>>) -> Element {
 
     cx.render(rsx! {
         header { class: "header",
-        h1 {"todos"}
-        input {
-            class: "new-todo",
-            placeholder: "What needs to be done?",
-            value: "{draft}",
-            autofocus: "true",
-            oninput: move |evt| {
-                draft.set(evt.value.clone());
-            },
-            onkeydown: move |evt| {
-                if evt.key() == Key::Enter && !draft.is_empty() {
-                    cx.props.todos.make_mut().insert(
-                        **todo_id,
-                        TodoItem {
-                            id: **todo_id,
-                            checked: false,
-                            contents: draft.to_string(),
-                        },
-                    );
-                    *todo_id.make_mut() += 1;
-                    draft.set("".to_string());
+            h1 { "todos" }
+            input {
+                class: "new-todo",
+                placeholder: "What needs to be done?",
+                value: "{draft}",
+                autofocus: "true",
+                oninput: move |evt| {
+                    draft.set(evt.value.clone());
+                },
+                onkeydown: move |evt| {
+                    if evt.key() == Key::Enter && !draft.is_empty() {
+                        cx.props
+                            .todos
+                            .make_mut()
+                            .insert(
+                                **todo_id,
+                                TodoItem {
+                                    id: **todo_id,
+                                    checked: false,
+                                    contents: draft.to_string(),
+                                },
+                            );
+                        *todo_id.make_mut() += 1;
+                        draft.set("".to_string());
+                    }
                 }
             }
         }
-    }
     })
 }
 
@@ -146,8 +146,7 @@ pub fn TodoEntry<'a>(cx: Scope<'a, TodoEntryProps<'a>>) -> Element {
     let editing = if **is_editing { "editing" } else { "" };
 
     cx.render(rsx!{
-        li {
-            class: "{completed} {editing}",
+        li { class: "{completed} {editing}",
             div { class: "view",
                 input {
                     class: "toggle",
@@ -160,14 +159,16 @@ pub fn TodoEntry<'a>(cx: Scope<'a, TodoEntryProps<'a>>) -> Element {
                 }
                 label {
                     r#for: "cbg-{todo.id}",
-                    ondblclick: move |_| is_editing.set(true),
+                    ondoubleclick: move |_| is_editing.set(true),
                     prevent_default: "onclick",
                     "{todo.contents}"
                 }
                 button {
                     class: "destroy",
-                    onclick: move |_| { cx.props.todos.make_mut().remove(&todo.id); },
-                    prevent_default: "onclick",
+                    onclick: move |_| {
+                        cx.props.todos.make_mut().remove(&todo.id);
+                    },
+                    prevent_default: "onclick"
                 }
             }
             is_editing.then(|| rsx!{
@@ -213,15 +214,15 @@ pub fn ListFooter<'a>(cx: Scope<'a, ListFooterProps<'a>>) -> Element {
     cx.render(rsx! {
         footer { class: "footer",
             span { class: "todo-count",
-                strong {"{active_todo_count} "}
-                span {"{active_todo_text} left"}
+                strong { "{active_todo_count} " }
+                span { "{active_todo_text} left" }
             }
             ul { class: "filters",
-                for (state, state_text, url) in [
-                    (FilterState::All, "All", "#/"),
-                    (FilterState::Active, "Active", "#/active"),
-                    (FilterState::Completed, "Completed", "#/completed"),
-                ] {
+                for (state , state_text , url) in [
+    (FilterState::All, "All", "#/"),
+    (FilterState::Active, "Active", "#/active"),
+    (FilterState::Completed, "Completed", "#/completed"),
+] {
                     li {
                         a {
                             href: url,
@@ -250,8 +251,14 @@ pub fn PageFooter(cx: Scope) -> Element {
     cx.render(rsx! {
         footer { class: "info",
             p { "Double-click to edit a todo" }
-            p { "Created by ", a { href: "http://github.com/jkelleyrtp/", "jkelleyrtp" }}
-            p { "Part of ", a { href: "http://todomvc.com", "TodoMVC" }}
+            p {
+                "Created by "
+                a { href: "http://github.com/jkelleyrtp/", "jkelleyrtp" }
+            }
+            p {
+                "Part of "
+                a { href: "http://todomvc.com", "TodoMVC" }
+            }
         }
     })
 }

packages/desktop/headless_tests/events.rs

@@ -229,75 +229,111 @@ fn app(cx: Scope) -> Element {
                     println!("{:?}", event.data);
                     assert!(event.data.modifiers().is_empty());
                     assert!(event.data.held_buttons().is_empty());
-                    assert_eq!(event.data.trigger_button(), Some(dioxus_html::input_data::MouseButton::Primary));
+                    assert_eq!(
+                        event.data.trigger_button(),
+                        Some(dioxus_html::input_data::MouseButton::Primary),
+                    );
                     recieved_events.modify(|x| *x + 1)
-                },
+                }
             }
             div {
                 id: "mouse_move_div",
                 onmousemove: move |event| {
                     println!("{:?}", event.data);
                     assert!(event.data.modifiers().is_empty());
-                    assert!(event.data.held_buttons().contains(dioxus_html::input_data::MouseButton::Secondary));
+                    assert!(
+                        event
+                            .data
+                            .held_buttons()
+                            .contains(dioxus_html::input_data::MouseButton::Secondary),
+                    );
                     recieved_events.modify(|x| *x + 1)
-                },
+                }
             }
             div {
                 id: "mouse_click_div",
                 onclick: move |event| {
                     println!("{:?}", event.data);
                     assert!(event.data.modifiers().is_empty());
-                    assert!(event.data.held_buttons().contains(dioxus_html::input_data::MouseButton::Secondary));
-                    assert_eq!(event.data.trigger_button(), Some(dioxus_html::input_data::MouseButton::Secondary));
+                    assert!(
+                        event
+                            .data
+                            .held_buttons()
+                            .contains(dioxus_html::input_data::MouseButton::Secondary),
+                    );
+                    assert_eq!(
+                        event.data.trigger_button(),
+                        Some(dioxus_html::input_data::MouseButton::Secondary),
+                    );
                     recieved_events.modify(|x| *x + 1)
-                },
+                }
             }
-            div{
+            div {
                 id: "mouse_dblclick_div",
-                ondblclick: move |event| {
+                ondoubleclick: move |event| {
                     println!("{:?}", event.data);
                     assert!(event.data.modifiers().is_empty());
-                    assert!(event.data.held_buttons().contains(dioxus_html::input_data::MouseButton::Primary));
-                    assert!(event.data.held_buttons().contains(dioxus_html::input_data::MouseButton::Secondary));
-                    assert_eq!(event.data.trigger_button(), Some(dioxus_html::input_data::MouseButton::Secondary));
+                    assert!(
+                        event.data.held_buttons().contains(dioxus_html::input_data::MouseButton::Primary),
+                    );
+                    assert!(
+                        event
+                            .data
+                            .held_buttons()
+                            .contains(dioxus_html::input_data::MouseButton::Secondary),
+                    );
+                    assert_eq!(
+                        event.data.trigger_button(),
+                        Some(dioxus_html::input_data::MouseButton::Secondary),
+                    );
                     recieved_events.modify(|x| *x + 1)
                 }
             }
-            div{
+            div {
                 id: "mouse_down_div",
                 onmousedown: move |event| {
                     println!("{:?}", event.data);
                     assert!(event.data.modifiers().is_empty());
-                    assert!(event.data.held_buttons().contains(dioxus_html::input_data::MouseButton::Secondary));
-                    assert_eq!(event.data.trigger_button(), Some(dioxus_html::input_data::MouseButton::Secondary));
+                    assert!(
+                        event
+                            .data
+                            .held_buttons()
+                            .contains(dioxus_html::input_data::MouseButton::Secondary),
+                    );
+                    assert_eq!(
+                        event.data.trigger_button(),
+                        Some(dioxus_html::input_data::MouseButton::Secondary),
+                    );
                     recieved_events.modify(|x| *x + 1)
                 }
             }
-            div{
+            div {
                 id: "mouse_up_div",
                 onmouseup: move |event| {
                     println!("{:?}", event.data);
                     assert!(event.data.modifiers().is_empty());
                     assert!(event.data.held_buttons().is_empty());
-                    assert_eq!(event.data.trigger_button(), Some(dioxus_html::input_data::MouseButton::Primary));
+                    assert_eq!(
+                        event.data.trigger_button(),
+                        Some(dioxus_html::input_data::MouseButton::Primary),
+                    );
                     recieved_events.modify(|x| *x + 1)
                 }
             }
-            div{
+            div {
                 id: "wheel_div",
                 width: "100px",
                 height: "100px",
                 background_color: "red",
                 onwheel: move |event| {
                     println!("{:?}", event.data);
-                    let dioxus_html::geometry::WheelDelta::Pixels(delta)= event.data.delta()else{
-                        panic!("Expected delta to be in pixels")
-                    };
+                    let dioxus_html::geometry::WheelDelta::Pixels(delta) = event.data.delta() else {
+                    panic!("Expected delta to be in pixels") };
                     assert_eq!(delta, Vector3D::new(1.0, 2.0, 3.0));
                     recieved_events.modify(|x| *x + 1)
                 }
             }
-            input{
+            input {
                 id: "key_down_div",
                 onkeydown: move |event| {
                     println!("{:?}", event.data);
@@ -306,11 +342,10 @@ fn app(cx: Scope) -> Element {
                     assert_eq!(event.data.code().to_string(), "KeyA");
                     assert_eq!(event.data.location, 0);
                     assert!(event.data.is_auto_repeating());
-
                     recieved_events.modify(|x| *x + 1)
                 }
             }
-            input{
+            input {
                 id: "key_up_div",
                 onkeyup: move |event| {
                     println!("{:?}", event.data);
@@ -319,11 +354,10 @@ fn app(cx: Scope) -> Element {
                     assert_eq!(event.data.code().to_string(), "KeyA");
                     assert_eq!(event.data.location, 0);
                     assert!(!event.data.is_auto_repeating());
-
                     recieved_events.modify(|x| *x + 1)
                 }
             }
-            input{
+            input {
                 id: "key_press_div",
                 onkeypress: move |event| {
                     println!("{:?}", event.data);
@@ -332,18 +366,17 @@ fn app(cx: Scope) -> Element {
                     assert_eq!(event.data.code().to_string(), "KeyA");
                     assert_eq!(event.data.location, 0);
                     assert!(!event.data.is_auto_repeating());
-
                     recieved_events.modify(|x| *x + 1)
                 }
             }
-            input{
+            input {
                 id: "focus_in_div",
                 onfocusin: move |event| {
                     println!("{:?}", event.data);
                     recieved_events.modify(|x| *x + 1)
                 }
             }
-            input{
+            input {
                 id: "focus_out_div",
                 onfocusout: move |event| {
                     println!("{:?}", event.data);

packages/dioxus-tui/examples/all_terminal_events.rs

@@ -37,7 +37,7 @@ fn app(cx: Scope) -> Element {
         // todo: remove
         let mut trimmed = format!("{event:?}");
         trimmed.truncate(200);
-        rsx!(p { "{trimmed}" })
+        rsx!( p { "{trimmed}" } )
     });
 
     let log_event = move |event: Event| {
@@ -45,10 +45,7 @@ fn app(cx: Scope) -> Element {
     };
 
     cx.render(rsx! {
-        div {
-            width: "100%",
-            height: "100%",
-            flex_direction: "column",
+        div { width: "100%", height: "100%", flex_direction: "column",
             div {
                 width: "80%",
                 height: "50%",
@@ -59,7 +56,7 @@ fn app(cx: Scope) -> Element {
 
                 onmousemove: move |event| log_event(Event::MouseMove(event.inner().clone())),
                 onclick: move |event| log_event(Event::MouseClick(event.inner().clone())),
-                ondblclick: move |event| log_event(Event::MouseDoubleClick(event.inner().clone())),
+                ondoubleclick: move |event| log_event(Event::MouseDoubleClick(event.inner().clone())),
                 onmousedown: move |event| log_event(Event::MouseDown(event.inner().clone())),
                 onmouseup: move |event| log_event(Event::MouseUp(event.inner().clone())),
 
@@ -73,13 +70,8 @@ fn app(cx: Scope) -> Element {
                 onfocusout: move |event| log_event(Event::FocusOut(event.inner().clone())),
 
                 "Hover, click, type or scroll to see the info down below"
-            },
-            div {
-                width: "80%",
-                height: "50%",
-                flex_direction: "column",
-                events_rendered,
-            },
-        },
+            }
+            div { width: "80%", height: "50%", flex_direction: "column", events_rendered }
+        }
     })
 }

packages/fullstack/src/hooks/server_cached.rs

@@ -12,9 +12,11 @@ use serde::{de::DeserializeOwned, Serialize};
 /// use dioxus_fullstack::prelude::*;
 ///
 /// fn app(cx: Scope) -> Element {
-///    let state1 = use_state(cx, || from_server(|| {
+///    let state1 = use_state(cx, || server_cached(|| {
 ///       1234
 ///    }));
+/// 
+///    todo!()
 /// }
 /// ```
 pub fn server_cached<O: 'static + Serialize + DeserializeOwned>(server_fn: impl Fn() -> O) -> O {

packages/html/src/events/mouse.rs

@@ -119,10 +119,7 @@ impl_event! {
     /// oncontextmenu
     oncontextmenu
 
-    /// ondoubleclick
-    ondoubleclick
-
-    /// ondoubleclick
+    #[deprecated(since = "0.5.0", note = "use ondoubleclick instead")]
     ondblclick
 
     /// onmousedown
@@ -149,6 +146,19 @@ impl_event! {
     onmouseup
 }
 
+/// ondoubleclick
+#[inline]
+pub fn ondoubleclick<'a, E: crate::EventReturn<T>, T>(_cx: &'a ::dioxus_core::ScopeState, mut _f: impl FnMut(::dioxus_core::Event<MouseData>) -> E + 'a) -> ::dioxus_core::Attribute<'a> {
+    ::dioxus_core::Attribute::new(
+        "ondblclick",
+        _cx.listener(move |e: ::dioxus_core::Event<MouseData>| {
+            _f(e).spawn(_cx);
+        }),
+        None,
+        false,
+    )
+}
+
 impl MouseData {
     /// Construct MouseData with the specified properties
     ///

packages/web/src/cache.rs

@@ -190,7 +190,7 @@ pub static BUILTIN_INTERNED_STRINGS: &[&str] = &[
     "oncopy",
     "oncuechange",
     "oncut",
-    "ondblclick",
+    "ondoubleclick",
     "ondrag",
     "ondragend",
     "ondragenter",