Prevent default if an onclick event is triggered on a button under a form (#3804)

packages/interpreter/src/ts/native.ts

@@ -334,22 +334,24 @@ export class NativeInterpreter extends JSChannel_ {
       return;
     }
 
-    // prevent buttons in forms from submitting the form
-    if (target.tagName === "BUTTON" && event.type == "submit") {
+    // If the target is a form prevent the click event
+    // from submitting the form
+    let form = target.closest("form");
+    if (target.tagName === "BUTTON" && (event.type == "submit" || form)) {
       event.preventDefault();
     }
 
     // If the target is an anchor tag, we want to intercept the click too, to prevent the browser from navigating
     let a_element = target.closest("a");
-    if (a_element == null) {
-      return;
-    }
+    if (a_element) {
+      event.preventDefault();
 
-    event.preventDefault();
-
-    const href = a_element.getAttribute("href");
-    if (href !== "" && href !== null && href !== undefined) {
-      this.ipc.postMessage(this.serializeIpcMessage("browser_open", { href }));
+      const href = a_element.getAttribute("href");
+      if (href !== "" && href !== null && href !== undefined) {
+        this.ipc.postMessage(
+          this.serializeIpcMessage("browser_open", { href })
+        );
+      }
     }
   }
 
@@ -478,7 +480,7 @@ function handleVirtualdomEventSync(
   // the issue here isn't that big, tbh, but there's a small chance we lose the event due to header max size (16k per header, 32k max)
   const contents_bytes = new TextEncoder().encode(contents);
   const contents_base64 = btoa(String.fromCharCode.apply(null, contents_bytes));
-  xhr.setRequestHeader("dioxus-data", contents_base64)
+  xhr.setRequestHeader("dioxus-data", contents_base64);
   xhr.send();
 
   // Deserialize the response, and then prevent the default/capture the event if the virtualdom wants to