From cf5cb17d61baf3da3f62721299e8b51b4b171a21 Mon Sep 17 00:00:00 2001
From: Maurits Lourens <maurits.lourens@gmail.com>
Date: Mon, 26 Jul 2021 23:48:59 +0200
Subject: [PATCH 1/3] delete component using the keyboard

---
 .../design/AppPreview/CurrentItemPreview.svelte    | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
index 607061013d..a6d186817c 100644
--- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
@@ -103,8 +103,7 @@
       } else if (type === "update-prop") {
         store.actions.components.updateProp(data.prop, data.value)
       } else if (type === "delete-component" && data.id) {
-        idToDelete = data.id
-        confirmDeleteDialog.show()
+        confirmDeleteComponent(data.id)
       } else if (type === "preview-loaded") {
         // Wait for this event to show the client library if intelligent
         // loading is supported
@@ -113,8 +112,19 @@
         console.warning(`Client sent unknown event type: ${type}`)
       }
     })
+
+    iframe.contentWindow.addEventListener("keydown", event => {
+      if ((event.key === "Delete" || event.key === "Backspace") && selectedComponentId) {
+        confirmDeleteComponent(selectedComponentId);
+      }
+    })
   })
 
+  const confirmDeleteComponent = (componentId) => {
+    idToDelete = componentId
+    confirmDeleteDialog.show()
+  }
+
   const deleteComponent = () => {
     store.actions.components.delete({ _id: idToDelete })
     idToDelete = null

From bca7fe1d24bbb58c784395136b715a4cc80f01d8 Mon Sep 17 00:00:00 2001
From: Maurits Lourens <maurits.lourens@gmail.com>
Date: Mon, 26 Jul 2021 23:53:11 +0200
Subject: [PATCH 2/3] remove event listeners prevents memory leaks

---
 .../design/AppPreview/CurrentItemPreview.svelte        | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
index a6d186817c..7c0be0e067 100644
--- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { onMount } from "svelte"
+  import { onMount, onDestroy } from "svelte"
   import { store, currentAsset } from "builderStore"
   import iframeTemplate from "./iframeTemplate"
   import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
@@ -120,6 +120,14 @@
     })
   })
 
+  // 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")
+  })
+
   const confirmDeleteComponent = (componentId) => {
     idToDelete = componentId
     confirmDeleteDialog.show()

From 49e7e405d25e391f89b52ad3c344878f30345ec5 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 3/3] 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()