Merge pull request #310 from DioxusLabs/jk/forms-links

examples/form.rs

@@ -11,15 +11,17 @@ fn main() {
 
 fn app(cx: Scope) -> Element {
     cx.render(rsx! {
-        div {
+        Router {
-            h1 { "Form" }
+            div {
-            form {
+                h1 { "Form" }
-                onsubmit: move |ev| println!("Submitted {:?}", ev.values),
+                form {
-                oninput: move |ev| println!("Input {:?}", ev.values),
+                    onsubmit: move |ev| println!("Submitted {:?}", ev.values),
-                input { r#type: "text", name: "username" }
+                    oninput: move |ev| println!("Input {:?}", ev.values),
-                input { r#type: "text", name: "full-name" }
+                    input { r#type: "text", name: "username" }
-                input { r#type: "password", name: "password" }
+                    input { r#type: "text", name: "full-name" }
-                button { "Submit the form" }
+                    input { r#type: "password", name: "password" }
+                    button { r#type: "submit", value: "Submit", "Submit the form" }
+                }
             }
         }
     })

packages/interpreter/src/interpreter.js

@@ -77,7 +77,7 @@ export class Interpreter {
     const element = this.nodes[root];
     element.setAttribute("data-dioxus-id", `${root}`);
     if (this.listeners[event_name] === undefined) {
-      this.listeners[event_name] = 0;
+      this.listeners[event_name] = 1;
       this.handlers[event_name] = handler;
       this.root.addEventListener(event_name, handler);
     } else {
@@ -190,9 +190,13 @@ export class Interpreter {
         this.RemoveEventListener(edit.root, edit.event_name);
         break;
       case "NewEventListener":
+        console.log(this.listeners);
+
         // this handler is only provided on desktop implementations since this
         // method is not used by the web implementation
         let handler = (event) => {
+          console.log(event);
+
           let target = event.target;
           if (target != null) {
             let realId = target.getAttribute(`data-dioxus-id`);
@@ -215,7 +219,7 @@ export class Interpreter {
               }
 
               // also prevent buttons from submitting
-              if (target.tagName === "BUTTON") {
+              if (target.tagName === "BUTTON" && event.type == "submit") {
                 event.preventDefault();
               }
             }
@@ -239,11 +243,15 @@ export class Interpreter {
             if (shouldPreventDefault === `on${event.type}`) {
               event.preventDefault();
             }
+
             if (event.type === "submit") {
               event.preventDefault();
             }
 
-            if (target.tagName === "FORM") {
+            if (
+              target.tagName === "FORM" &&
+              (event.type === "submit" || event.type === "input")
+            ) {
               for (let x = 0; x < target.elements.length; x++) {
                 let element = target.elements[x];
                 let name = element.getAttribute("name");