prevent default file input behavior on desktop

packages/desktop/src/protocol.rs

@@ -9,10 +9,26 @@ use wry::{
 };
 
 fn module_loader(root_name: &str) -> String {
+    let js = INTERPRETER_JS.replace(
+        "/*POST_HANDLE_EDITS*/",
+        r#"// Prevent file inputs from opening the file dialog on click
+    let inputs = document.querySelectorAll("input");
+    for (let input of inputs) {
+      input.addEventListener("click", (event) => {
+        let target = event.target;
+        // prevent file inputs from opening the file dialog on click
+        const type = target.getAttribute("type");
+        if (type === "file") {
+          window.ipc.postMessage(serializeIpcMessage("file_diolog", { accept: target.getAttribute("accept"), multiple: target.hasAttribute("multiple") }));
+          event.preventDefault();
+        }
+      });
+    }"#,
+    );
     format!(
         r#"
 <script>
-    {INTERPRETER_JS}
+    {js}
 
     let rootname = "{root_name}";
     let root = window.document.getElementById(rootname);

packages/interpreter/src/interpreter.js

@@ -17,8 +17,7 @@ class ListenerMap {
       } else {
         this.global[event_name].active++;
       }
-    }
+    } else {
-    else {
       const id = element.getAttribute("data-dioxus-id");
       if (!this.local[id]) {
         this.local[id] = {};
@@ -32,11 +31,13 @@ class ListenerMap {
     if (bubbles) {
       this.global[event_name].active--;
       if (this.global[event_name].active === 0) {
-        this.root.removeEventListener(event_name, this.global[event_name].callback);
+        this.root.removeEventListener(
+          event_name,
+          this.global[event_name].callback
+        );
         delete this.global[event_name];
       }
-    }
+    } else {
-    else {
       const id = element.getAttribute("data-dioxus-id");
       delete this.local[id][event_name];
       if (this.local[id].length === 0) {
@@ -143,8 +144,7 @@ class Interpreter {
   SetAttribute(id, field, value, ns) {
     if (value === null) {
       this.RemoveAttribute(id, field, ns);
-    }
+    } else {
-    else {
       const node = this.nodes[id];
       this.SetAttributeInner(node, field, value, ns);
     }
@@ -212,6 +212,8 @@ class Interpreter {
     for (let edit of edits.edits) {
       this.handleEdit(edit);
     }
+
+    /*POST_HANDLE_EDITS*/
   }
 
   SaveTemplate(template) {
@@ -342,25 +344,30 @@ class Interpreter {
         this.RemoveEventListener(edit.id, edit.name);
         break;
       case "NewEventListener":
-
         let bubbles = event_bubbles(edit.name);
+        this.NewEventListener(edit.name, edit.id, bubbles, handler);
+        break;
+    }
+  }
+}
 
 // this handler is only provided on desktop implementations since this
 // method is not used by the web implementation
-        let handler = (event) => {
+function handler(event) {
+  console.log(event);
   let target = event.target;
   if (target != null) {
-            let realId = target.getAttribute(`data-dioxus-id`);
+    let shouldPreventDefault = target.getAttribute(`dioxus-prevent-default`);
-            let shouldPreventDefault = target.getAttribute(
-              `dioxus-prevent-default`
-            );
 
     if (event.type === "click") {
-              // todo call prevent default if it's the right type of event
+      // Prevent redirects from links
       let a_element = target.closest("a");
       if (a_element != null) {
         event.preventDefault();
-                if (shouldPreventDefault !== `onclick` && a_element.getAttribute(`dioxus-prevent-default`) !== `onclick`) {
+        if (
+          shouldPreventDefault !== `onclick` &&
+          a_element.getAttribute(`dioxus-prevent-default`) !== `onclick`
+        ) {
           const href = a_element.getAttribute("href");
           if (href !== "" && href !== null && href !== undefined) {
             window.ipc.postMessage(
@@ -375,20 +382,10 @@ class Interpreter {
         event.preventDefault();
       }
     }
-            // walk the tree to find the real element
-            while (realId == null) {
-              // we've reached the root we don't want to send an event
-              if (target.parentElement === null) {
-                return;
-              }
 
-              target = target.parentElement;
+    const realId = find_real_id(target);
-              realId = target.getAttribute(`data-dioxus-id`);
-            }
 
-            shouldPreventDefault = target.getAttribute(
+    shouldPreventDefault = target.getAttribute(`dioxus-prevent-default`);
-              `dioxus-prevent-default`
-            );
 
     let contents = serialize_event(event);
 
@@ -417,8 +414,7 @@ class Interpreter {
             }
           } else {
             // @ts-ignore
-                    contents.values[name] =
+            contents.values[name] = element.value ?? element.textContent;
-                      element.value ?? element.textContent;
           }
         }
       }
@@ -436,11 +432,21 @@ class Interpreter {
       })
     );
   }
-        };
-        this.NewEventListener(edit.name, edit.id, bubbles, handler);
-        break;
 }
+
+function find_real_id(target) {
+  let realId = target.getAttribute(`data-dioxus-id`);
+  // walk the tree to find the real element
+  while (realId == null) {
+    // we've reached the root we don't want to send an event
+    if (target.parentElement === null) {
+      return;
     }
+
+    target = target.parentElement;
+    realId = target.getAttribute(`data-dioxus-id`);
+  }
+  return realId;
 }
 
 function get_mouse_data(event) {