Synchronous prevent default (#2792)

* add prevent default methods to the event

* sync prevent default almost working

* sync prevent default working

* Move event handling into the runtime

* update core tests

* restore desktop file dialog

* implement prevent default on web

* add a hint about the new prevent default method

* fix web prevent default

* Fix CTRL+click on links

* fix values memorize in place test

* Fix a few more tests

* Add a playwright test for sync prevent default

* Fix core doc tests

* create a deprecated VirtualDom::handle_event

* fix macos imports in desktop

* Fix onmounted event

* Fix liveview support

* switch to RefCell for metadata

* Remove println

* remove prevent default attribute

* remove web specific link behavior

* Fix liveview links

* more liveview fixes for link

* Fix merge conflicts

* Fix clippy

* use the new prevent default in the file upload example

examples/file_upload.rs

@@ -73,11 +73,14 @@ fn app() -> Element {
 
         div {
             id: "drop-zone",
-            prevent_default: "ondragover ondrop",
             background_color: if hovered() { "lightblue" } else { "lightgray" },
-            ondragover: move |_| hovered.set(true),
+            ondragover: move |evt| {
+                evt.prevent_default();
+                hovered.set(true)
+            },
             ondragleave: move |_| hovered.set(false),
             ondrop: move |evt| async move {
+                evt.prevent_default();
                 hovered.set(false);
                 if let Some(file_engine) = evt.files() {
                     read_files(file_engine).await;

examples/link.rs

@@ -70,8 +70,10 @@ fn DefaultLinks() -> Element {
             // It will just log "Hello Dioxus" to the console
             a {
                 href: "http://dioxuslabs.com/",
-                prevent_default: "onclick",
-                onclick: |_| println!("Hello Dioxus"),
+                onclick: |event| {
+                    event.prevent_default();
+                    println!("Hello Dioxus")
+                },
                 "Custom event link - links inside of your app"
             }
         }

examples/svg.rs

@@ -40,8 +40,10 @@ fn Dice() -> Element {
     rsx! {
         svg {
             view_box: "-1000 -1000 2000 2000",
-            prevent_default: "onclick",
-            onclick: move |_| value.set(thread_rng().gen_range(1..=6)),
+            onclick: move |event| {
+                event.prevent_default();
+                value.set(thread_rng().gen_range(1..=6))
+            },
             rect { x: -1000, y: -1000, width: 2000, height: 2000, rx: 200, fill: "#aaa" }
             for ((x, y), _) in DOTS.iter().zip(active_dots.read().iter()).filter(|(_, &active)| active) {
                 circle {

examples/todomvc.rs

@@ -177,15 +177,15 @@ fn TodoEntry(mut todos: Signal<HashMap<u32, TodoItem>>, id: u32) -> Element {
                 label {
                     r#for: "cbg-{id}",
                     ondoubleclick: move |_| is_editing.set(true),
-                    prevent_default: "onclick",
+                    onclick: |evt| evt.prevent_default(),
                     "{contents}"
                 }
                 button {
                     class: "destroy",
-                    onclick: move |_| {
+                    onclick: move |evt| {
+                        evt.prevent_default();
                         todos.write().remove(&id);
                     },
-                    prevent_default: "onclick"
                 }
             }
 
@@ -220,41 +220,43 @@ fn ListFooter(
     let show_clear_completed = use_memo(move || todos.read().values().any(|todo| todo.checked));
 
     rsx! {
-            footer { class: "footer",
-                span { class: "todo-count",
-                    strong { "{active_todo_count} " }
-                    span {
-                        match active_todo_count() {
-                            1 => "item",
-                            _ => "items",
-                        }
-                        " left"
+        footer { class: "footer",
+            span { class: "todo-count",
+                strong { "{active_todo_count} " }
+                span {
+                    match active_todo_count() {
+                        1 => "item",
+                        _ => "items",
                     }
+                    " left"
                 }
-                ul { class: "filters",
-                    for (state , state_text , url) in [
-        (FilterState::All, "All", "#/"),
-        (FilterState::Active, "Active", "#/active"),
-        (FilterState::Completed, "Completed", "#/completed"),
-    ] {
-                        li {
-                            a {
-                                href: url,
-                                class: if filter() == state { "selected" },
-                                onclick: move |_| filter.set(state),
-                                prevent_default: "onclick",
-                                {state_text}
-                            }
+            }
+            ul { class: "filters",
+                for (state , state_text , url) in [
+                    (FilterState::All, "All", "#/"),
+                    (FilterState::Active, "Active", "#/active"),
+                    (FilterState::Completed, "Completed", "#/completed"),
+                ] {
+                    li {
+                        a {
+                            href: url,
+                            class: if filter() == state { "selected" },
+                            onclick: move |evt| {
+                                evt.prevent_default();
+                                filter.set(state)
+                            },
+                            {state_text}
                         }
                     }
                 }
-                if show_clear_completed() {
-                    button {
-                        class: "clear-completed",
-                        onclick: move |_| todos.write().retain(|_, todo| !todo.checked),
-                        "Clear completed"
-                    }
+            }
+            if show_clear_completed() {
+                button {
+                    class: "clear-completed",
+                    onclick: move |_| todos.write().retain(|_, todo| !todo.checked),
+                    "Clear completed"
                 }
             }
         }
+    }
 }