Cancel delete confirmation if clicking off element

package.json

@@ -49,6 +49,7 @@
     "@capacitor/cli": "^5.0.5",
     "@capacitor/core": "^5.0.5",
     "@capacitor/ios": "^5.0.5",
+    "@svelte-put/clickoutside": "^3.0.1",
     "date-fns": "^3.3.1",
     "firebase": "^10.1.0",
     "svelecte": "^3.17.2"

src/components/purchases/PastPurchase.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { format } from "date-fns";
   import { Database } from "../../lib/Database";
+  import { clickoutside } from "@svelte-put/clickoutside";
   import type {
     Purchase,
     WithFirebaseDocumentRef,
@@ -20,6 +21,10 @@
     deleteConfirmationActive =
       $purchaseAskingToConfirmDelete?.id === purchase.ref.id;
   }
+
+  const cancelDeleteConfirmation = () => {
+    deleteConfirmationActive && purchaseAskingToConfirmDelete.set(undefined);
+  };
 </script>
 
 <tr data-testid="purchase-list-item-{index}">
@@ -47,6 +52,8 @@
     class="text-center button-cell"
     data-testid="delete-item-{index}"
     class:under-edit={isUnderEdit}
+    use:clickoutside
+    on:clickoutside={cancelDeleteConfirmation}
     ><button
       on:click={() => {
         if (deleteConfirmationActive) {

tests/main-page.spec.ts

@@ -201,6 +201,15 @@ test.describe("Deleting", () => {
     await clickDeletePurchaseAtIndex(page, 0);
     await expect(await purchasesOnPage(page)).toBe(3);
   });
+  test("Clicking elsewhere after one delete click removes the confirmation prompt", async ({
+    page,
+  }) => {
+    await clickDeletePurchaseAtIndex(page, 0);
+    await page.getByTestId("money-icon").click();
+
+    await expect(page.getByTestId("delete-item-0")).toContainText("🗑️");
+    await expect(page.getByTestId("delete-item-0")).not.toHaveText("✅");
+  });
   test("Deleting clears any purchase from being under edit", async ({
     page,
   }) => {
@@ -268,8 +277,6 @@ test.describe("Reset", () => {
 
 // todo: firebase rules to require login?
 
-// todo: Clicking anywhere else on the page clears the purchase delete confirmation
-
 // idea: sort toggle (sort purchases by entry date or purchase date)
 
 // idea: dark theme