Stopped upgrade form from submitting on enter

assets/js/app.js

@@ -36,6 +36,17 @@ let liveSocket = new LiveSocket('/live', Socket, {
         window.Alpine.clone(from, to)
       }
     }
+  },
+  hooks: {
+    supressEnterSubmission: {
+      mounted() {
+        this.el.addEventListener('keypress', (event) => {
+          if (event.key === 'Enter') {
+            event.preventDefault()
+          }
+        })
+      }
+    }
   }
 })
 

lib/pinchflat_web/components/layouts/partials/upgrade_button_live.ex

@@ -3,10 +3,11 @@ defmodule Pinchflat.UpgradeButtonLive do
 
   def render(assigns) do
     ~H"""
-    <form phx-change="check_matching_text">
+    <form id="upgradeForm" phx-change="check_matching_text" phx-hook="supressEnterSubmission">
       <.input type="text" name="unlock-pro-textbox" value="" />
     </form>
 
+    <%!-- The setTimeout is so the modal has time to disappear before it's removed --%>
     <.button
       class="w-full mt-4"
       type="button"