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

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

Hide file tree

Showing 5 changed files with 71 additions and 1 deletion.
diff --git a/lib/PropertiesPanel.js b/lib/PropertiesPanel.js
@@ -549,6 +549,16 @@ 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, 'select', 'keydown', function(e) {
+
+    // DEL
+    if (e.keyCode === 46) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  });
+
   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 getSelect(container) {
+      return domQuery('select[name=select]', container);
+    }
+
+    var select, spy;
+
+    beforeEach(inject(function(propertiesPanel, elementRegistry, selection) {
+      propertiesPanel.attachTo(container);
+
+      var task2 = elementRegistry.get('Task_2');
+      selection.select(task2);
+
+      select = getSelect(propertiesPanel._container);
+
+      spy = sinon.spy();
+
+      document.addEventListener('keydown', spy);
+    }));
+
+    afterEach(function() {
+      document.removeEventListener('keydown', spy);
+    });
+
+
+    it('should stop propagation of DEL key events', function() {
+
+      // when
+      TestHelper.triggerKeyEvent(select, 'keydown', 46);
+
+      // then
+      expect(spy).to.not.have.been.called;
+    });
+
+  });
+
+
 });
diff --git a/test/spec/properties/PropertiesProvider.js b/test/spec/properties/PropertiesProvider.js
@@ -228,6 +228,9 @@ function createGroups(element, bpmnFactory) {
                 a: !values.a && new Error('a must be checked')
               };
             }
+          }, {
+            id: 'select',
+            html: '<select name="select"><option>foo</option><option>bar</option></select>'
           }
         ]
       }

diff --git a/test/spec/test.bpmn b/test/spec/test.bpmn
@@ -1,10 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:custom="http://custom" id="_pHDz0KojEeOJhIBv1RySdg" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="1.2.2" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
+<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:custom="http://custom" id="_pHDz0KojEeOJhIBv1RySdg" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="1.14.0" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
   <bpmn2:process id="Process_1" isExecutable="false">
     <bpmn2:startEvent id="StartEvent_1" name="Label" custom:foo="BAR">
       <bpmn2:documentation>FOO FOO BAR BAR</bpmn2:documentation>
     </bpmn2:startEvent>
     <bpmn2:task id="Task_1" custom:foo="BAR" />
+    <bpmn2:sendTask id="Task_2" />
   </bpmn2:process>
   <bpmndi:BPMNDiagram id="BPMNDiagram_1">
     <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
@@ -17,6 +18,9 @@
       <bpmndi:BPMNShape id="_BPMNShape_Task_3" bpmnElement="Task_1">
         <dc:Bounds x="260" y="146" width="100" height="80" />
       </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="SendTask_0tdg6fy_di" bpmnElement="Task_2">
+        <dc:Bounds x="260" y="283" width="100" height="80" />
+      </bpmndi:BPMNShape>
     </bpmndi:BPMNPlane>
   </bpmndi:BPMNDiagram>
 </bpmn2:definitions>