From 595436cee59d28a7675abeb285f1d853fa2aae8a Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 13 Sep 2026 12:59:58 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Enable=20native=20Ent?=
 =?UTF-8?q?er-to-submit=20for=20cover=20URL=20input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: jspann21 <179991454+jspann21@users.noreply.github.com>
---
 .jules/palette.md                                  |  3 +++
 .../library/components/CoverPickerModal.tsx        | 14 +++++++++-----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index e69de29..a4aec54 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-18 - Wrap Inputs in Forms for Native Submit
+**Learning:** Wrapping `<input>` and a corresponding `<button>` in a `<form onSubmit={...}>` provides highly reliable, accessible native Enter-to-submit behavior and eliminates the need for manual, brittle `onKeyDown` listeners (which often fail to account for assistive tech or autofill).
+**Action:** When creating or modifying inputs designed to execute a single action, always prefer a native `<form>` element over a standalone input with an `onKeyDown` Enter listener. Remember to set the button to `type="submit"` and use `e.preventDefault()` in the `onSubmit` handler to prevent page reloads.
diff --git a/src/features/library/components/CoverPickerModal.tsx b/src/features/library/components/CoverPickerModal.tsx
index 9e73ee7..6761942 100644
--- a/src/features/library/components/CoverPickerModal.tsx
+++ b/src/features/library/components/CoverPickerModal.tsx
@@ -516,14 +516,19 @@ export function CoverPickerModal({
                 {/* URL Input */}
                 {showUrlInput ? (
                     <div className="border-b border-slate-100 px-6 py-3 dark:border-slate-800">
-                        <div className="flex items-center gap-2">
+                        <form
+                            onSubmit={(e) => {
+                                e.preventDefault()
+                                void handleCustomUrl()
+                            }}
+                            className="flex items-center gap-2"
+                        >
                             <input
                                 aria-label="Cover image URL"
                                 type="url"
                                 value={customUrl}
                                 onChange={(e) => handleCustomUrlChange(e.target.value)}
                                 onPaste={handleCustomUrlPaste}
-                                onKeyDown={(e) => { if (e.key === 'Enter') void handleCustomUrl() }}
                                 placeholder="https://example.com/cover.jpg"
                                 aria-invalid={customUrlError ? true : undefined}
                                 aria-describedby={customUrlError || isCheckingCustomUrl ? 'cover-url-status' : undefined}
@@ -540,15 +545,14 @@ export function CoverPickerModal({
                                 title={!customUrl.trim() ? 'Enter a valid image URL' : isCheckingCustomUrl ? 'Checking image link...' : undefined}
                             >
                                 <button
-                                    type="button"
-                                    onClick={() => { void handleCustomUrl() }}
+                                    type="submit"
                                     disabled={!customUrl.trim() || isCheckingCustomUrl}
                                     className="rounded-lg bg-accent-600 px-3 py-1.5 text-xs font-medium text-white transition hover:bg-accent-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:ring-offset-slate-900"
                                 >
                                     {isCheckingCustomUrl ? 'Checking' : 'Add'}
                                 </button>
                             </span>
-                        </div>
+                        </form>
                         {customUrlError ? (
                             <p id="cover-url-status" role="alert" className="mt-2 text-sm text-rose-600 dark:text-rose-400">
                                 {customUrlError}