From c7ddd0b44a2ec92c54f1af992bb894f72907cab6 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Tue, 3 Sep 2024 23:53:34 -0400
Subject: [PATCH] fix(web): paste event in input fields (#12297)

---
 web/src/lib/actions/shortcut.ts                     |  4 ++--
 .../drag-and-drop-upload-overlay.svelte             | 13 ++++++++++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/web/src/lib/actions/shortcut.ts b/web/src/lib/actions/shortcut.ts
index d28c294a89..df155ea821 100644
--- a/web/src/lib/actions/shortcut.ts
+++ b/web/src/lib/actions/shortcut.ts
@@ -15,7 +15,7 @@ export type ShortcutOptions<T = HTMLElement> = {
   preventDefault?: boolean;
 };
 
-export const shouldIgnoreShortcut = (event: KeyboardEvent): boolean => {
+export const shouldIgnoreEvent = (event: KeyboardEvent | ClipboardEvent): boolean => {
   if (event.target === event.currentTarget) {
     return false;
   }
@@ -52,7 +52,7 @@ export const shortcuts = <T extends HTMLElement>(
   options: ShortcutOptions<T>[],
 ): ActionReturn<ShortcutOptions<T>[]> => {
   function onKeydown(event: KeyboardEvent) {
-    const ignoreShortcut = shouldIgnoreShortcut(event);
+    const ignoreShortcut = shouldIgnoreEvent(event);
     for (const { shortcut, onShortcut, ignoreInputFields = true, preventDefault = true } of options) {
       if (ignoreInputFields && ignoreShortcut) {
         continue;
diff --git a/web/src/lib/components/shared-components/drag-and-drop-upload-overlay.svelte b/web/src/lib/components/shared-components/drag-and-drop-upload-overlay.svelte
index e84d2d66f0..6f92d81886 100644
--- a/web/src/lib/components/shared-components/drag-and-drop-upload-overlay.svelte
+++ b/web/src/lib/components/shared-components/drag-and-drop-upload-overlay.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
-  import { fade } from 'svelte/transition';
-  import ImmichLogo from './immich-logo.svelte';
   import { page } from '$app/stores';
+  import { shouldIgnoreEvent } from '$lib/actions/shortcut';
   import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
   import { fileUploadHandler } from '$lib/utils/file-uploader';
   import { isAlbumsRoute, isSharedLinkRoute } from '$lib/utils/navigation';
   import { t } from 'svelte-i18n';
+  import { fade } from 'svelte/transition';
+  import ImmichLogo from './immich-logo.svelte';
 
   $: albumId = isAlbumsRoute($page.route?.id) ? $page.params.albumId : undefined;
   $: isShare = isSharedLinkRoute($page.route?.id);
@@ -29,7 +30,13 @@
     await handleDataTransfer(e.dataTransfer);
   };
 
-  const onPaste = ({ clipboardData }: ClipboardEvent) => handleDataTransfer(clipboardData);
+  const onPaste = (event: ClipboardEvent) => {
+    if (shouldIgnoreEvent(event)) {
+      return;
+    }
+
+    return handleDataTransfer(event.clipboardData);
+  };
 
   const handleDataTransfer = async (dataTransfer?: DataTransfer | null) => {
     if (!dataTransfer) {