Fix ignored form submissions (#1799)

assets/js/events.js

@@ -82,4 +82,16 @@ export function registerGlobalEventHandlers() {
       target.dispatchEvent(new Event("click", { bubbles: true }));
     }
   });
+
+  // Ignore submit events on elements with phx-nosubmit
+  window.addEventListener(
+    "submit",
+    (event) => {
+      if (event.target.hasAttribute("phx-nosubmit")) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    { capture: true }
+  );
 }

lib/livebook_web/live/file_select_component.ex

@@ -86,7 +86,7 @@ defmodule LivebookWeb.FileSelectComponent do
             class="grow"
             phx-change="set_path"
             phx-submit={if @submit_event, do: "submit"}
-            onsubmit={unless @submit_event, do: "return false"}
+            phx-nosubmit={!@submit_event}
             phx-target={@myself}
           >
             <input

lib/livebook_web/live/session_live/bin_component.ex

@@ -37,7 +37,7 @@ defmodule LivebookWeb.SessionLive.BinComponent do
           <form
             :if={@bin_entries != []}
             phx-change="search"
-            onsubmit="return false"
+            phx-nosubmit
             phx-target={@myself}
             class="mt-1 relative"
           >

lib/livebook_web/live/session_live/export_live_markdown_component.ex

@@ -27,7 +27,7 @@ defmodule LivebookWeb.SessionLive.ExportLiveMarkdownComponent do
     ~H"""
     <div class="flex flex-col space-y-6">
       <div class="flex">
-        <form phx-change="set_options" onsubmit="return false;" phx-target={@myself}>
+        <form phx-change="set_options" phx-nosubmit phx-target={@myself}>
           <.switch_field name="include_outputs" label="Include outputs" value={@include_outputs} />
         </form>
       </div>

lib/livebook_web/live/session_live/persistence_component.ex

@@ -86,7 +86,7 @@ defmodule LivebookWeb.SessionLive.PersistenceComponent do
         <form
           phx-change="set_options"
           phx-target={@myself}
-          onsubmit="return false;"
+          phx-nosubmit
           class="flex flex-col space-y-4 items-start max-w-full"
         >
           <div class="flex flex-col space-y-4">

lib/livebook_web/live/session_live/shortcuts_component.ex

@@ -161,7 +161,7 @@ defmodule LivebookWeb.SessionLive.ShortcutsComponent do
         you have editor focus and directly modify the given cell content.
       </p>
       <div class="flex">
-        <form class="my-2" phx-change="settings" onsubmit="return false;" phx-target={@myself}>
+        <form class="my-2" phx-change="settings" phx-nosubmit phx-target={@myself}>
           <.switch_field name="basic" label="Basic view (essential shortcuts only)" value={@basic} />
         </form>
       </div>

lib/livebook_web/live/settings_live.ex

@@ -82,7 +82,7 @@ defmodule LivebookWeb.SettingsLive do
             <h2 class="text-xl text-gray-800 font-medium pb-2 border-b border-gray-200">
               Updates
             </h2>
-            <form class="mt-4" phx-change="save" onsubmit="return false;">
+            <form class="mt-4" phx-change="save" phx-nosubmit>
               <.switch_field
                 name="update_check_enabled"
                 label="Show banner when a new Livebook version is available"