From 378760074fe2054041f202699af4689b6e1eb88d Mon Sep 17 00:00:00 2001 From: Maurits Lourens 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()