only show delete confirmation when no input or textarea is focussed

This commit is contained in:
Maurits Lourens 2021-08-31 15:46:30 +02:00
parent 7173be59c6
commit 378760074f
1 changed files with 30 additions and 27 deletions

View File

@ -95,8 +95,18 @@
{ once: true }
)
// Add listener for events sent by cliebt library in preview
iframe.contentWindow.addEventListener("bb-event", event => {
// 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("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 })
@ -111,22 +121,15 @@
} else {
console.warning(`Client sent unknown event type: ${type}`)
}
})
};
iframe.contentWindow.addEventListener("keydown", event => {
if ((event.key === "Delete" || event.key === "Backspace") && selectedComponentId) {
const handleKeydownEvent = event => {
if ((event.key === "Delete" || event.key === "Backspace") &&
selectedComponentId &&
['input', 'textarea'].indexOf(iframe.contentWindow.document.activeElement?.tagName.toLowerCase()) === -1) {
confirmDeleteComponent(selectedComponentId);
}
})
})
// 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