Fix prevent default event (#1036)

pynecone/.templates/jinja/web/pages/index.js.jinja2

@@ -20,9 +20,7 @@ export default function Component() {
   const { {{const.color_mode}}, {{const.toggle_color_mode}} } = {{const.use_color_mode}}()
 
   const Event = (events, _e) => {
-      if (_e) {
-        _e.preventDefault();
-      }
+      preventDefault(_e);
       {{state_name|react_setter}}({
         ...{{state_name}},
         events: [...{{state_name}}.events, ...events],

pynecone/.templates/web/utils/state.js

@@ -2,7 +2,7 @@
 import axios from "axios";
 import io from "socket.io-client";
 import JSON5 from "json5";
-import config from "../pynecone.json"
+import config from "../pynecone.json";
 
 const UPLOAD = config.uploadUrl;
 // Global variable to hold the token.
@@ -96,7 +96,8 @@ export const applyEvent = async (event, router, socket) => {
   }
 
   if (event.name == "_set_value") {
-    const ref = event.payload.ref in refs ? refs[event.payload.ref] : event.payload.ref;
+    const ref =
+      event.payload.ref in refs ? refs[event.payload.ref] : event.payload.ref;
     ref.current.value = event.payload.value;
     return false;
   }
@@ -118,17 +119,11 @@ export const applyEvent = async (event, router, socket) => {
  * @param state The state with the event queue.
  * @param setResult The function to set the result.
  */
-export const applyRestEvent = async (
-  queue_event,
-  state,
-  setResult,
-) => {
+export const applyRestEvent = async (queue_event, state, setResult) => {
   if (queue_event.handler == "uploadFiles") {
-    await uploadFiles(state, setResult, queue_event.name, UPLOAD)
+    await uploadFiles(state, setResult, queue_event.name, UPLOAD);
   }
-
-}
-
+};
 
 /**
  * Process an event off the event queue.
@@ -162,23 +157,16 @@ export const updateState = async (
 
   // Process events with handlers via REST and all others via websockets.
   if (queue_event.handler) {
-
-    await applyRestEvent(queue_event, state, setResult)
-
-
-  }
-  else {
+    await applyRestEvent(queue_event, state, setResult);
+  } else {
     const eventSent = await applyEvent(queue_event, router, socket);
     if (!eventSent) {
       // If no event was sent, set processing to false and return.
       setResult({ ...state, processing: false });
     }
   }
-
-
 };
 
-
 /**
  * Connect to a websocket and set the handlers.
  * @param socket The socket object to connect.
@@ -233,17 +221,12 @@ export const connect = async (
  * @param handler The handler to use.
  * @param endpoint The endpoint to upload to.
  */
-export const uploadFiles = async (
-  state,
-  setResult,
-  handler,
-  endpoint
-) => {
-  const files = state.files
+export const uploadFiles = async (state, setResult, handler, endpoint) => {
+  const files = state.files;
 
   // return if there's no file to upload
   if (files.length == 0) {
-    return
+    return;
   }
 
   const headers = {
@@ -253,7 +236,11 @@ export const uploadFiles = async (
 
   // Add the token and handler to the file name.
   for (let i = 0; i < files.length; i++) {
-    formdata.append("files", files[i], getToken() + ":" + handler + ":" + files[i].name);
+    formdata.append(
+      "files",
+      files[i],
+      getToken() + ":" + handler + ":" + files[i].name
+    );
   }
 
   // Send the file to the server.
@@ -283,12 +270,21 @@ export const E = (name, payload = {}, handler = null) => {
   return { name, payload, handler };
 };
 
-
 /***
  * Check if a value is truthy in python.
  * @param val The value to check.
  * @returns True if the value is truthy, false otherwise.
  */
 export const isTrue = (val) => {
-  return Array.isArray(val) ? val.length > 0 : !!val
-}
+  return Array.isArray(val) ? val.length > 0 : !!val;
+};
+
+/**
+ * Prevent the default event.
+ * @param event
+ */
+export const preventDefault = (event) => {
+  if (event && event.hasOwnProperty("preventDefault")) {
+    event.preventDefault();
+  }
+};

pynecone/compiler/compiler.py

@@ -26,6 +26,7 @@ DEFAULT_IMPORTS: imports.ImportDict = {
         ImportVar(tag="uploadFiles"),
         ImportVar(tag="E"),
         ImportVar(tag="isTrue"),
+        ImportVar(tag="preventDefault"),
         ImportVar(tag="refs"),
     },
     "": {ImportVar(tag="focus-visible/dist/focus-visible")},