fix navigating when files are dropped

examples/file_upload.rs

@@ -43,10 +43,8 @@ fn app() -> Element {
             checked: enable_directory_upload,
             oninput: move |evt| enable_directory_upload.set(evt.checked()),
         },
-        label {
-            r#for: "directory-upload",
-            "Enable directory upload"
-        }
+
+        label { r#for: "directory-upload", "Enable directory upload" }
 
         input {
             r#type: "file",
@@ -60,7 +58,6 @@ fn app() -> Element {
             // cheating with a little bit of JS...
             "ondragover": "this.style.backgroundColor='#88FF88';",
             "ondragleave": "this.style.backgroundColor='#FFFFFF';",
-
             id: "drop-zone",
             prevent_default: "ondrop dragover dragenter",
             ondrop: handle_file_drop,

examples/form.rs

@@ -15,23 +15,92 @@ fn app() -> Element {
     rsx! {
         div {
             h1 { "Form" }
+
+            // The form element is used to create an HTML form for user input
+            // You can attach regular attributes to it
             form {
-                oninput: move |ev| values.set(ev.values()),
+                id: "cool-form",
+                style: "display: flex; flex-direction: column;",
+
+                // You can attach a handler to the entire form
+                oninput: move |ev| {
+                    println!("Input event: {:#?}", ev);
+                    values.set(ev.values());
+                },
+
+                // On desktop/liveview, the form will not navigate the page - the expectation is that you handle
+                // The form event.
+                // Howver, if your form doesn't have a submit handler, it might navigate the page depending on the webview.
+                // We suggest always attaching a submit handler to the form.
+                onsubmit: move |ev| {
+                    println!("Submit event: {:#?}", ev);
+                },
+
+                // Regular text inputs with handlers
+                label { r#for: "username", "Username" }
                 input {
                     r#type: "text",
                     name: "username",
-                    oninput: move |ev| values.set(ev.values())
+                    oninput: move |ev| {
+                        println!("setting username");
+                        values.set(ev.values());
+                    }
                 }
+
+                // And then the various inputs that might exist
+                // Note for a value to be returned in .values(), it must be named!
+
+                label { r#for: "full-name", "Full Name" }
                 input { r#type: "text", name: "full-name" }
+
+                label { r#for: "email", "Email" }
+                input { r#type: "email", pattern: ".+@example\\.com", size: "30", required: "true", id: "email", name: "email" }
+
+                label { r#for: "password", "Password" }
                 input { r#type: "password", name: "password" }
-                input { r#type: "radio", name: "color", value: "red" }
+
+                label { r#for: "color", "Color" }
+                input { r#type: "radio", checked: true, name: "color", value: "red" }
                 input { r#type: "radio", name: "color", value: "blue" }
+                input { r#type: "radio", name: "color", value: "green" }
+
+                // Select multiple comes in as a comma separated list of selected values
+                // You should split them on the comma to get the values manually
+                label { r#for: "country", "Country" }
+                select {
+                    name: "country",
+                    multiple: true,
+                    oninput: move |ev| {
+                        println!("Input event: {:#?}", ev);
+                        println!("Values: {:#?}", ev.value().split(',').collect::<Vec<_>>());
+                    },
+                    option { value: "usa",  "USA" }
+                    option { value: "canada",  "Canada" }
+                    option { value: "mexico",  "Mexico" }
+                }
+
+                // Safari can be quirky with color inputs on mac.
+                // We recommend always providing a text input for color as a fallback.
+                label { r#for: "color", "Color" }
+                input { r#type: "color", value: "#000002", name: "head", id: "head" }
+
+                // Dates!
+                input {
+                    min: "2018-01-01",
+                    value: "2018-07-22",
+                    r#type: "date",
+                    name: "trip-start",
+                    max: "2025-12-31",
+                    id: "start"
+                }
+
+                // Buttons will submit your form by default.
                 button { r#type: "submit", value: "Submit", "Submit the form" }
             }
         }
         div {
             h1 { "Oninput Values" }
-            "{values:#?}"
+            pre { "{values:#?}" }
         }
     }
 }