fix: do not propagate events handled by keyboard bindings

Closes #3016
camunda · Aug 17, 2022 · 15e5802 · 15e5802
1 parent c820e6d
commit 15e5802
Showing 1 changed file with 79 additions and 74 deletions.
diff --git a/...pmn/modeler/features/properties-panel-keyboard-bindings/PropertiesPanelKeyoardBindings.js b/...pmn/modeler/features/properties-panel-keyboard-bindings/PropertiesPanelKeyoardBindings.js
@@ -8,77 +8,82 @@
  * except in compliance with the MIT License.
  */
 
-import {
-  isCmd as isCommandOrControl,
-  isKey,
-  isShift
-} from 'diagram-js/lib/features/keyboard/KeyboardUtil';
-
-
-export default class PropertiesPanelKeyboardBindings {
-  constructor(commandStack, eventBus, propertiesPanel) {
-    this._commandStack = commandStack;
-    this._eventBus = eventBus;
-    this._propertiesPanel = propertiesPanel;
-
-    eventBus.on('propertiesPanel.attach', this._addEventListeners);
-
-    eventBus.on('propertiesPanel.detach', this._removeEventListeners);
-  }
-
-  _addEventListeners = () => {
-    const container = this._getContainer();
-
-    container.addEventListener('focusin', this.handleFocusin);
-    container.addEventListener('focusout', this.handleFocusout);
-    container.addEventListener('keydown', this.handleKeydown);
-  }
-
-  _removeEventListeners = () => {
-    const container = this._getContainer();
-
-    container.removeEventListener('focusin', this.handleFocusin);
-    container.removeEventListener('focusout', this.handleFocusout);
-    container.removeEventListener('keydown', this.handleKeydown);
-  }
-
-  handleFocusin = () => {
-    this._eventBus.fire('propertiesPanel.focusin');
-  }
-
-  handleFocusout = () => {
-    this._eventBus.fire('propertiesPanel.focusout');
-  }
-
-  handleKeydown = event => {
-    const commandStack = this._commandStack;
-
-    if (isUndo(event)) {
-      commandStack.canUndo() && commandStack.undo();
-
-      event.preventDefault();
-    }
-
-    if (isRedo(event)) {
-      commandStack.canRedo() && commandStack.redo();
-
-      event.preventDefault();
-    }
-  }
-
-  _getContainer() {
-    return this._propertiesPanel._container;
-  }
-}
-
-PropertiesPanelKeyboardBindings.$inject = [ 'commandStack', 'eventBus', 'propertiesPanel' ];
-
-// helpers //////////
-
-function isUndo(event) {
-  return isCommandOrControl(event) && !isShift(event) && isKey([ 'z', 'Z' ], event);
-}
-
-function isRedo(event) {
-  return isCommandOrControl(event) && (isKey([ 'y', 'Y' ], event) || (isKey([ 'z', 'Z' ], event) && isShift(event)));
-}
+import {
+  isCmd as isCommandOrControl,
+  isKey,
+  isShift
+} from 'diagram-js/lib/features/keyboard/KeyboardUtil';
+
+
+export default class PropertiesPanelKeyboardBindings {
+  constructor(commandStack, eventBus, propertiesPanel) {
+    this._commandStack = commandStack;
+    this._eventBus = eventBus;
+    this._propertiesPanel = propertiesPanel;
+
+    eventBus.on('propertiesPanel.attach', this._addEventListeners);
+
+    eventBus.on('propertiesPanel.detach', this._removeEventListeners);
+  }
+
+  _addEventListeners = () => {
+    const container = this._getContainer();
+
+    container.addEventListener('focusin', this.handleFocusin);
+    container.addEventListener('focusout', this.handleFocusout);
+    container.addEventListener('keydown', this.handleKeydown);
+  }
+
+  _removeEventListeners = () => {
+    const container = this._getContainer();
+
+    container.removeEventListener('focusin', this.handleFocusin);
+    container.removeEventListener('focusout', this.handleFocusout);
+    container.removeEventListener('keydown', this.handleKeydown);
+  }
+
+  handleFocusin = () => {
+    this._eventBus.fire('propertiesPanel.focusin');
+  }
+
+  handleFocusout = () => {
+    this._eventBus.fire('propertiesPanel.focusout');
+  }
+
+  handleKeydown = event => {
+    const commandStack = this._commandStack;
+
+    if (isUndo(event)) {
+      commandStack.canUndo() && commandStack.undo();
+
+      this._cancel(event);
+    }
+
+    if (isRedo(event)) {
+      commandStack.canRedo() && commandStack.redo();
+
+      this._cancel(event);
+    }
+  }
+
+  _getContainer() {
+    return this._propertiesPanel._container;
+  }
+
+  _cancel(event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+}
+
+PropertiesPanelKeyboardBindings.$inject = [ 'commandStack', 'eventBus', 'propertiesPanel' ];
+
+// helpers //////////
+
+function isUndo(event) {
+  return isCommandOrControl(event) && !isShift(event) && isKey([ 'z', 'Z' ], event);
+}
+
+function isRedo(event) {
+  return isCommandOrControl(event) && (isKey([ 'y', 'Y' ], event) || (isKey([ 'z', 'Z' ], event) && isShift(event)));
+}