From a82727916345c7e713d4225c4771ef3f23d1392c Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Tue, 20 May 2025 00:14:50 +0200
Subject: [PATCH] feat(donationcreate): improved focus handling

---
 src/components/tools/DonationCreate.svelte | 52 +++++++++++++++++-----
 1 file changed, 40 insertions(+), 12 deletions(-)

diff --git a/src/components/tools/DonationCreate.svelte b/src/components/tools/DonationCreate.svelte
index 6aaefc53..c156430e 100644
--- a/src/components/tools/DonationCreate.svelte
+++ b/src/components/tools/DonationCreate.svelte
@@ -20,7 +20,7 @@
     postalcode: "",
     country: "Germany",
   };
-  let amount = 0;
+  let amount = null;
   let address_checked = false;
   let donor_create_new = false;
   let last_created = null;
@@ -111,6 +111,7 @@
           noOptionsMessage={$_("no-runners-found")}
           on:select={(selectedValue) => {
             runnerinfo = selectedValue.detail.value;
+            document.querySelector("#donation_amount_eur").focus();
           }}
           on:clear={() => (runnerinfo = { id: 0, firstname: "", lastname: "" })}
         />
@@ -126,11 +127,19 @@
             class:focus:border-red-500={!amount > 0}
             class:focus:ring-red-500={!amount > 0}
             bind:value={amount}
+            on:keydown={(e)=>
+            {
+              if(e.key==="Enter"){
+                e.preventDefault();
+                document.querySelector("#button_existing_donor").focus();
+              }
+            }}
             type="number"
             step="0.01"
+            id="donation_amount_eur"
             name="donation_amount_eur"
             class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-neutral-300 border bg-neutral-50 text-neutral-800 p-2"
-            placeholder="2.00"
+            placeholder="z.B. 1,50"
           />
           <span
             class="inline-flex items-center px-3 rounded-r-md border border-neutral-300 bg-neutral-50 text-neutral-500 text-sm"
@@ -147,17 +156,35 @@
         <div class="mb-2">
           <div class="flex border rounded-md overflow-hidden shadow-sm">
             <button
-              class:bg-indigo-600={!donor_create_new}
-              class:text-white={!donor_create_new}
-              class="py-2 px-4 w-1/2 transition-colors"
-              on:click={() => {
-                donor_create_new = false;
-                donorinfo = { id: 0, firstname: "", lastname: "" };
-              }}
+            on:keydown={(e)=>
+            {
+              if(e.key==="ArrowRight"){
+                e.preventDefault();
+                document.querySelector("#button_new_donor").focus();
+                document.querySelector("#button_new_donor").click();
+              }
+            }}
+            id="button_existing_donor"
+            class:bg-indigo-600={!donor_create_new}
+            class:text-white={!donor_create_new}
+            class="py-2 px-4 w-1/2 transition-colors"
+            on:click={() => {
+              donor_create_new = false;
+              donorinfo = { id: 0, firstname: "", lastname: "" };
+            }}
             >
-              {$_("existing-donor")}
-            </button>
-            <button
+            {$_("existing-donor")}
+          </button>
+          <button
+              on:keydown={(e)=>
+              {
+                if(e.key==="ArrowLeft"){
+                  e.preventDefault();
+                  document.querySelector("#button_existing_donor").focus();
+                  document.querySelector("#button_existing_donor").click();
+                }
+              }}
+              id="button_new_donor"
               class={`py-2 px-4 w-1/2 transition-colors ${donor_create_new ? "bg-indigo-600 text-white" : "bg-gray-100 text-gray-700"}`}
               on:click={() => {
                 donor_create_new = true;
@@ -311,6 +338,7 @@
       <!-- Submit Button -->
       <div class="mt-6">
         <button
+          id="submit_button"
           type="button"
           class="w-full inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:bg-gray-400 disabled:cursor-not-allowed"
           disabled={!amount > 0 ||