feat(keyboard): specify which keys are handled

related to bpmn-io/bpmn-js#1493
bpmn-io · Oct 12, 2021 · 253dc34 · 253dc34
1 parent 9dff2ab
commit 253dc34
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 2 deletions.
diff --git a/lib/features/keyboard/Keyboard.js b/lib/features/keyboard/Keyboard.js
@@ -17,6 +17,8 @@ import {
 var KEYDOWN_EVENT = 'keyboard.keydown',
     KEYUP_EVENT = 'keyboard.keyup';
 
+var HANDLE_MODIFIER_ATTRIBUTE = 'input-handle-modified-keys';
+
 var DEFAULT_PRIORITY = 1000;
 
 /**
@@ -106,7 +108,32 @@ Keyboard.prototype._keyHandler = function(event, type) {
 };
 
 Keyboard.prototype._isEventIgnored = function(event) {
-  return isInput(event.target) && !isCmd(event);
+  return isInput(event.target) && this._isModifiedKeyIgnored(event);
+};
+
+Keyboard.prototype._isModifiedKeyIgnored = function(event) {
+  if (!isCmd(event)) {
+    return true;
+  }
+
+  var allowedModifiers = this._getAllowedModifiers(event.target);
+  return !allowedModifiers.includes(event.key);
+};
+
+Keyboard.prototype._getAllowedModifiers = function(element) {
+  if (!element || element === document) {
+    return [];
+  }
+
+  if (element.hasAttribute(HANDLE_MODIFIER_ATTRIBUTE)) {
+    return element.getAttribute(HANDLE_MODIFIER_ATTRIBUTE).split(',');
+  }
+
+  if (element === this._node) {
+    return [];
+  }
+
+  return this._getAllowedModifiers(element.parentElement || element.parentNode);
 };
 
 Keyboard.prototype.bind = function(node) {

diff --git a/test/spec/features/keyboard/KeyboardSpec.js b/test/spec/features/keyboard/KeyboardSpec.js
@@ -3,6 +3,9 @@ import TestContainer from 'mocha-test-container-support';
 import {
   assign
 } from 'min-dash';
+import {
+  domify
+} from 'min-dom';
 
 import modelingModule from 'lib/features/modeling';
 import keyboardModule from 'lib/features/keyboard';
@@ -154,7 +157,7 @@ describe('features/keyboard', function() {
     );
 
 
-    it('should fire modifier event if target is input field', inject(
+    it('should not fire modifier event if target is input field', inject(
       function(keyboard, eventBus) {
 
         // given
@@ -167,11 +170,75 @@ describe('features/keyboard', function() {
         keyboard._keyHandler({ key: TEST_KEY, metaKey: true, target: inputField });
         keyboard._keyHandler({ key: TEST_KEY, ctrlKey: true, target: inputField });
 
+        // then
+        expect(eventBusSpy).to.not.be.called;
+      })
+    );
+
+
+    it('should fire modifier event if target is input field and requesting it', inject(
+      function(keyboard, eventBus) {
+
+        // given
+        var eventBusSpy = sinon.spy(eventBus, 'fire');
+
+        var inputField = domify('<input></input>');
+        testDiv.appendChild(inputField);
+        testDiv.setAttribute('input-handle-modified-keys', 'a');
+
+        // when
+        keyboard._keyHandler({ key: 'a', metaKey: true, target: inputField });
+        keyboard._keyHandler({ key: 'a', ctrlKey: true, target: inputField });
+
         // then
         expect(eventBusSpy).to.have.been.calledTwice;
       })
     );
 
+
+    it('should not fire modifier event if target is input field and not requesting it', inject(
+      function(keyboard, eventBus) {
+
+        // given
+        var eventBusSpy = sinon.spy(eventBus, 'fire');
+
+        var inputField = domify('<input></input>');
+        testDiv.appendChild(inputField);
+        testDiv.setAttribute('input-handle-modified-keys', 'a');
+
+        // when
+        keyboard._keyHandler({ key: 'b', metaKey: true, target: inputField });
+        keyboard._keyHandler({ key: 'b', ctrlKey: true, target: inputField });
+
+        // then
+        expect(eventBusSpy).to.not.be.called;
+      })
+    );
+
+
+    it('should not fire modifier event if the requesting element is outside of binding', inject(
+      function(keyboard, eventBus) {
+
+        // given
+        var inputContainer = domify('<div class="container"><input /></div>'),
+            inputField = inputContainer.querySelector('input');
+
+        testDiv.appendChild(inputContainer);
+        testDiv.setAttribute('input-handle-modified-keys', 'a');
+
+        keyboard.bind(inputContainer);
+
+        var eventBusSpy = sinon.spy(eventBus, 'fire');
+
+        // when
+        keyboard._keyHandler({ key: 'a', metaKey: true, target: inputField });
+        keyboard._keyHandler({ key: 'a', ctrlKey: true, target: inputField });
+
+        // then
+        expect(eventBusSpy).to.not.be.called;
+      })
+    );
+
   });