From 6462b053493e207e9b04d363a4e5227949c8a23a Mon Sep 17 00:00:00 2001
From: allardy <yann.allard1@gmail.com>
Date: Thu, 24 Oct 2019 14:43:51 -0400
Subject: [PATCH] fix(studio): fix backspace issue

---
 src/bp/ui-studio/src/web/keyboardShortcuts.ts             | 1 +
 .../ui-studio/src/web/views/FlowBuilder/diagram/index.tsx | 3 ---
 src/bp/ui-studio/src/web/views/FlowBuilder/index.tsx      | 8 ++++++++
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/bp/ui-studio/src/web/keyboardShortcuts.ts b/src/bp/ui-studio/src/web/keyboardShortcuts.ts
index a8f8c85ea30..51583545489 100644
--- a/src/bp/ui-studio/src/web/keyboardShortcuts.ts
+++ b/src/bp/ui-studio/src/web/keyboardShortcuts.ts
@@ -7,6 +7,7 @@ export const keyMap = {
   undo: `${controlKey}+z`,
   find: `${controlKey}+f`,
   redo: `${controlKey}+shift+z`,
+  delete: ['backspace', 'del'],
   'emulator-focus': ['e', `${controlKey}+e`],
   'docs-toggle': `${controlKey}+h`,
   'lang-switcher': `${controlKey}+l`,
diff --git a/src/bp/ui-studio/src/web/views/FlowBuilder/diagram/index.tsx b/src/bp/ui-studio/src/web/views/FlowBuilder/diagram/index.tsx
index 30782963d5c..7eda16072ab 100644
--- a/src/bp/ui-studio/src/web/views/FlowBuilder/diagram/index.tsx
+++ b/src/bp/ui-studio/src/web/views/FlowBuilder/diagram/index.tsx
@@ -404,9 +404,6 @@ class Diagram extends Component<Props> {
       this.copySelectedElementToBuffer()
     } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
       this.pasteElementFromBuffer()
-    } else if (event.code === 'Backspace' || event.code === 'Delete') {
-      event.preventDefault()
-      this.deleteSelectedElements()
     }
   }
 
diff --git a/src/bp/ui-studio/src/web/views/FlowBuilder/index.tsx b/src/bp/ui-studio/src/web/views/FlowBuilder/index.tsx
index 02ccf729973..de2baf4aa69 100644
--- a/src/bp/ui-studio/src/web/views/FlowBuilder/index.tsx
+++ b/src/bp/ui-studio/src/web/views/FlowBuilder/index.tsx
@@ -15,6 +15,7 @@ import { Container } from '~/components/Shared/Interface'
 import { Timeout, toastFailure, toastInfo } from '~/components/Shared/Utils'
 import { isOperationAllowed } from '~/components/Shared/Utils/AccessControl'
 import DocumentationProvider from '~/components/Util/DocumentationProvider'
+import { isInputFocused } from '~/keyboardShortcuts'
 import { getDirtyFlows, RootReducer } from '~/reducers'
 import { UserReducer } from '~/reducers/user'
 
@@ -197,6 +198,13 @@ class FlowBuilder extends Component<Props, State> {
         e.preventDefault()
         toastInfo('Pssst! Flows now save automatically, no need to save anymore.', Timeout.LONG)
       },
+      delete: e => {
+        if (!isInputFocused()) {
+          e.preventDefault()
+        }
+
+        this.diagram.deleteSelectedElements()
+      },
       cancel: e => {
         e.preventDefault()
         this.props.closeFlowNodeProps()