fix(properties-panel): stop propagation of key events

Related to camunda/camunda-modeler#680
bpmn-io · May 28, 2018 · 94e01cb · 94e01cb
1 parent adee204
commit 94e01cb
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 0 deletions.
diff --git a/lib/PropertiesPanel.js b/lib/PropertiesPanel.js
@@ -549,6 +549,11 @@ PropertiesPanel.prototype._bindListeners = function(container) {
   domDelegate.bind(container, 'input, textarea, [contenteditable]', 'input', debounce(handleChange, DEBOUNCE_DELAY));
   domDelegate.bind(container, 'input, textarea, select, [contenteditable]', 'change', handleChange);
 
+  // handle key events
+  domDelegate.bind(container, 'input, textarea, select, [contenteditable]', 'keydown', function(e) {
+    e.stopPropagation();
+  });
+
   domDelegate.bind(container, '[data-action]', 'click', function onClick(event) {
 
     // triggers on all inputs

diff --git a/test/TestHelper.js b/test/TestHelper.js
@@ -124,6 +124,20 @@ var triggerInput = function(element, value) {
   element.focus();
 };
 
+var triggerKeyEvent = function(element, event, code) {
+  var e = document.createEvent('Events');
+
+  if (e.initEvent) {
+    e.initEvent(event, true, true);
+  }
+
+  e.keyCode = code;
+  e.which = code;
+
+  element.dispatchEvent(e);
+};
+
+
 /**
  * Select a form field with the specified index in the DOM
  *
@@ -178,6 +192,7 @@ var selectedByIndex = function(element) {
 module.exports.triggerEvent = triggerEvent;
 module.exports.triggerValue = triggerValue;
 module.exports.triggerInput = triggerInput;
+module.exports.triggerKeyEvent = triggerKeyEvent;
 module.exports.triggerFormFieldSelection = triggerFormFieldSelection;
 module.exports.selectedByOption = selectedByOption;
 module.exports.selectedByIndex = selectedByIndex;

diff --git a/test/spec/PropertiesPanelSpec.js b/test/spec/PropertiesPanelSpec.js
@@ -430,4 +430,42 @@ describe('properties-panel', function() {
   });
 
 
+  describe('listeners', function() {
+
+    function getTableEntryInputField(container) {
+      return domQuery('input[name=value]', container);
+    }
+
+    var input, spy;
+
+    beforeEach(inject(function(propertiesPanel, elementRegistry, selection) {
+      propertiesPanel.attachTo(container);
+
+      var eventShape = elementRegistry.get('StartEvent_1');
+      selection.select(eventShape);
+
+      input = getTableEntryInputField(propertiesPanel._container);
+
+      spy = sinon.spy();
+
+      document.addEventListener('keydown', spy);
+    }));
+
+    afterEach(function() {
+      document.removeEventListener('keydown', spy);
+    });
+
+
+    it('should stop propagation of key events', function() {
+
+      // when
+      TestHelper.triggerKeyEvent(input, 'keydown', 46);
+
+      // then
+      expect(spy).to.not.have.been.called;
+    });
+
+  });
+
+
 });