From 4f475ce0722d92c4c346533f4733bc6183ddfd2a Mon Sep 17 00:00:00 2001
From: Ben Mitchinson <mitchinson.dev@gmail.com>
Date: Sun, 24 Mar 2024 20:58:40 -0500
Subject: [PATCH] Cancel delete confirmation if clicking off element

---
 package.json                                 |  1 +
 src/components/purchases/PastPurchase.svelte |  7 +++++++
 tests/main-page.spec.ts                      | 11 +++++++++--
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index e19502d..cafbd3f 100644
--- a/package.json
+++ b/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"
diff --git a/src/components/purchases/PastPurchase.svelte b/src/components/purchases/PastPurchase.svelte
index 29a1c47..ba8eacb 100644
--- a/src/components/purchases/PastPurchase.svelte
+++ b/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) {
diff --git a/tests/main-page.spec.ts b/tests/main-page.spec.ts
index b974ab9..f7dff3e 100644
--- a/tests/main-page.spec.ts
+++ b/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