From ae8e6c655d110976aa1fcce5e568ff5f040e064c Mon Sep 17 00:00:00 2001
From: Floze <88098863+floze-the-genius@users.noreply.github.com>
Date: Fri, 14 Aug 2026 17:04:38 +0400
Subject: [PATCH] fix: submit project IDs through a form

---
 playground/components/ProjectInput.vue | 32 ++++++++++++--------------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/playground/components/ProjectInput.vue b/playground/components/ProjectInput.vue
index 4d5d9d2e..cfe0a61c 100644
--- a/playground/components/ProjectInput.vue
+++ b/playground/components/ProjectInput.vue
@@ -4,24 +4,22 @@
     {{ error }}
   </details>
   <template v-else>
-    <span class=".inline-block"
-      >Enter a project id:
-      <span
-        class="projinput inline-block"
-        tabindex="0"
-        @focus="() => numInput.focus()"
-        >https://scratch.mit.edu/projects/<input
-          type="text"
-          ref="numInput"
-          v-model="projId" /></span
-      ><button
-        @click="handleNumInput"
-        :disabled="goDisabled"
-        :title="buttonTooltip"
-      >
+    <form class="inline-block" @submit.prevent="handleNumInput">
+      <label for="project-id"
+        >Enter a project ID:
+        <span class="projinput inline-block"
+          >https://scratch.mit.edu/projects/<input
+            id="project-id"
+            type="text"
+            ref="numInput"
+            v-model="projId"
+            inputmode="numeric"
+            required /></span
+      ></label>
+      <button type="submit" :disabled="goDisabled" :title="buttonTooltip">
         Go!
-      </button></span
-    >
+      </button>
+    </form>
     <span class="inline-block"
       >or upload a project: <ProjectFileInput @error="err"></ProjectFileInput
     ></span>