From 461f2595b50ce7e3e716e8c88d10631a74226301 Mon Sep 17 00:00:00 2001
From: Yoonjae Choi <123538138+uniqueeest@users.noreply.github.com>
Date: Tue, 30 Apr 2024 06:59:32 +0900
Subject: [PATCH] fix(web): Prevent DELETE key from clearing DateInput in modal
 (#8846)

* fix(web): Prevent DELETE key from clearing DateInput in modal (#8804)

* chore: test prettier

* fix: stop propagation

* fix: stop propagation in modal

* fix: remove unnecessary function and revise lint issue

* chore: cleanup

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
---
 .../shared-components/change-date.svelte      | 66 ++++++++-----------
 .../full-screen-modal.svelte                  |  1 +
 web/src/lib/utils/shortcut.ts                 |  2 +-
 3 files changed, 31 insertions(+), 38 deletions(-)

diff --git a/web/src/lib/components/shared-components/change-date.svelte b/web/src/lib/components/shared-components/change-date.svelte
index e87f77ae52..0e53f0b261 100644
--- a/web/src/lib/components/shared-components/change-date.svelte
+++ b/web/src/lib/components/shared-components/change-date.svelte
@@ -53,43 +53,35 @@
       dispatch('confirm', value);
     }
   };
-
-  const handleKeydown = (event: KeyboardEvent) => {
-    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
-      event.stopPropagation();
-    }
-  };
 </script>
 
-<div role="presentation" on:keydown={handleKeydown}>
-  <ConfirmDialogue
-    id="edit-date-time-modal"
-    confirmColor="primary"
-    title="Edit date and time"
-    prompt="Please select a new date:"
-    disabled={!date.isValid}
-    onConfirm={handleConfirm}
-    onClose={handleCancel}
-  >
-    <div class="flex flex-col text-md px-4 text-center gap-2" slot="prompt">
-      <div class="flex flex-col">
-        <label for="datetime">Date and Time</label>
-        <DateInput
-          class="immich-form-input text-sm my-4 w-full"
-          id="datetime"
-          type="datetime-local"
-          bind:value={selectedDate}
-        />
-      </div>
-      <div class="flex flex-col w-full mt-2">
-        <Combobox
-          bind:selectedOption
-          id="settings-timezone"
-          label="Timezone"
-          options={timezones}
-          placeholder="Search timezone..."
-        />
-      </div>
+<ConfirmDialogue
+  id="edit-date-time-modal"
+  confirmColor="primary"
+  title="Edit date and time"
+  prompt="Please select a new date:"
+  disabled={!date.isValid}
+  onConfirm={handleConfirm}
+  onClose={handleCancel}
+>
+  <div class="flex flex-col text-md px-4 text-center gap-2" slot="prompt">
+    <div class="flex flex-col">
+      <label for="datetime">Date and Time</label>
+      <DateInput
+        class="immich-form-input text-sm my-4 w-full"
+        id="datetime"
+        type="datetime-local"
+        bind:value={selectedDate}
+      />
     </div>
-  </ConfirmDialogue>
-</div>
+    <div class="flex flex-col w-full mt-2">
+      <Combobox
+        bind:selectedOption
+        id="settings-timezone"
+        label="Timezone"
+        options={timezones}
+        placeholder="Search timezone..."
+      />
+    </div>
+  </div>
+</ConfirmDialogue>
diff --git a/web/src/lib/components/shared-components/full-screen-modal.svelte b/web/src/lib/components/shared-components/full-screen-modal.svelte
index a35a544d5b..176255ad09 100644
--- a/web/src/lib/components/shared-components/full-screen-modal.svelte
+++ b/web/src/lib/components/shared-components/full-screen-modal.svelte
@@ -45,6 +45,7 @@
 
 <FocusTrap>
   <section
+    role="presentation"
     in:fade={{ duration: 100 }}
     out:fade={{ duration: 100 }}
     class="fixed left-0 top-0 z-[9990] flex h-screen w-screen place-content-center place-items-center bg-black/40"
diff --git a/web/src/lib/utils/shortcut.ts b/web/src/lib/utils/shortcut.ts
index f8ca467d12..fca1ed7ef8 100644
--- a/web/src/lib/utils/shortcut.ts
+++ b/web/src/lib/utils/shortcut.ts
@@ -20,7 +20,7 @@ export const shouldIgnoreShortcut = (event: KeyboardEvent): boolean => {
     return false;
   }
   const type = (event.target as HTMLInputElement).type;
-  return ['textarea', 'text'].includes(type);
+  return ['textarea', 'text', 'date', 'datetime-local'].includes(type);
 };
 
 export const matchesShortcut = (event: KeyboardEvent, shortcut: Shortcut) => {