From 378760074fe2054041f202699af4689b6e1eb88d Mon Sep 17 00:00:00 2001
From: Maurits Lourens <maurits.lourens@gmail.com>
Date: Tue, 31 Aug 2021 15:46:30 +0200
Subject: [PATCH] only show delete confirmation when no input or textarea is
 focussed

---
 .../AppPreview/CurrentItemPreview.svelte      | 57 ++++++++++---------
 1 file changed, 30 insertions(+), 27 deletions(-)

diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
index 7c0be0e067..dc7cebbb5f 100644
--- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
@@ -95,39 +95,42 @@
       { once: true }
     )
 
-    // Add listener for events sent by cliebt library in preview
-    iframe.contentWindow.addEventListener("bb-event", event => {
-      const { type, data } = event.detail
-      if (type === "select-component" && data.id) {
-        store.actions.components.select({ _id: data.id })
-      } else if (type === "update-prop") {
-        store.actions.components.updateProp(data.prop, data.value)
-      } else if (type === "delete-component" && data.id) {
-        confirmDeleteComponent(data.id)
-      } else if (type === "preview-loaded") {
-        // Wait for this event to show the client library if intelligent
-        // loading is supported
-        loading = false
-      } else {
-        console.warning(`Client sent unknown event type: ${type}`)
-      }
-    })
-
-    iframe.contentWindow.addEventListener("keydown", event => {
-      if ((event.key === "Delete" || event.key === "Backspace") && selectedComponentId) {
-        confirmDeleteComponent(selectedComponentId);
-      }
-    })
+    // Add listener for events sent by client library in preview
+    iframe.contentWindow.addEventListener("bb-event", handleBudibaseEvent)
+    iframe.contentWindow.addEventListener("keydown", handleKeydownEvent)
   })
 
   // remove all iframe event listeners on component destroy
   onDestroy(() => {
-    iframe.contentWindow.removeEventListener("ready")
-    iframe.contentWindow.removeEventListener("error")
-    iframe.contentWindow.removeEventListener("bb-event")
-    iframe.contentWindow.removeEventListener("keydown")
+    iframe.contentWindow.removeEventListener("bb-event", handleBudibaseEvent)
+    iframe.contentWindow.removeEventListener("keydown", handleKeydownEvent)
   })
 
+  const handleBudibaseEvent = event => {
+    const { type, data } = event.detail
+    if (type === "select-component" && data.id) {
+      store.actions.components.select({ _id: data.id })
+    } else if (type === "update-prop") {
+      store.actions.components.updateProp(data.prop, data.value)
+    } else if (type === "delete-component" && data.id) {
+      confirmDeleteComponent(data.id)
+    } else if (type === "preview-loaded") {
+      // Wait for this event to show the client library if intelligent
+      // loading is supported
+      loading = false
+    } else {
+      console.warning(`Client sent unknown event type: ${type}`)
+    }
+  };
+
+  const handleKeydownEvent = event => {
+    if ((event.key === "Delete" || event.key === "Backspace") &&
+      selectedComponentId &&
+      ['input', 'textarea'].indexOf(iframe.contentWindow.document.activeElement?.tagName.toLowerCase()) === -1) {
+      confirmDeleteComponent(selectedComponentId);
+    }
+  }
+
   const confirmDeleteComponent = (componentId) => {
     idToDelete = componentId
     confirmDeleteDialog.show()