expanding to support duplicate hotkeys for data-hotkey-scope

github · Sep 30, 2021 · 6170945 · 6170945
1 parent 3e56334
commit 6170945
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 12 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -8,8 +8,11 @@
 
 <body>
 
-  <button onclick="alert('clicked!')" data-hotkey-scope="text-area-1" data-hotkey="Control+d,Meta+d">press meta+d or ctrl+d in text area to click this button</button><br>
-  <textarea id="text-area-1" data-hotkey="t" rows="4" cols="40">press t to focus on this field</textarea><br>
+  <button onclick="alert('clicked button 1!')" data-hotkey-scope="text-area-1" data-hotkey="Control+d,Meta+d">press meta+d or ctrl+d in text area 1 to click button 1</button><br>
+  <textarea id="text-area-1" rows="4" cols="40">text area 1</textarea><br>
+  <button onclick="alert('clicked button 2!')" data-hotkey-scope="text-area-2" data-hotkey="Control+d,Meta+d">press meta+d or ctrl+d in text area 2 to click button 2</button><br>
+  <textarea id="text-area-2" rows="4" cols="40">text area 2</textarea><br>
+  <label><input data-hotkey="t" type="text">Press t to focus this field</label><br>
   <label><input data-hotkey="r" type="checkbox">Press r to check/uncheck this checkbox</label><br>
   <a href="#ok" data-hotkey="o k">Press <kbd>o k</kbd> click this link</a>
 

diff --git a/src/index.ts b/src/index.ts
@@ -35,22 +35,23 @@ function keyDownHandler(event: KeyboardEvent) {
 
   currentTriePosition = newTriePosition
   if (newTriePosition instanceof Leaf) {
+    const target = event.target as HTMLElement
     let shouldFire = true
-    const elementToFire = newTriePosition.children[newTriePosition.children.length - 1]
-    const hotkeyScope = elementToFire.getAttribute('data-hotkey-scope')
-    if (isFormField(event.target)) {
-      const target = event.target as HTMLElement
-      if (target.id !== elementToFire.getAttribute('data-hotkey-scope')) {
-        shouldFire = false
-      }
-    } else if (hotkeyScope) {
-      shouldFire = false
+    let elementToFire
+    if (isFormField(target)) {
+      const scopedElements = newTriePosition.children.filter(element => element.hasAttribute('data-hotkey-scope'))
+      elementToFire = scopedElements.find(element => element.getAttribute('data-hotkey-scope') === target.id)
+      shouldFire = elementToFire ? true : false
+    } else {
+      const nonScopedElements = newTriePosition.children.filter(element => !element.hasAttribute('data-hotkey-scope'))
+      elementToFire = nonScopedElements[nonScopedElements.length - 1]
     }
 
-    if (shouldFire) {
+    if (elementToFire && shouldFire) {
       fireDeterminedAction(elementToFire)
       event.preventDefault()
     }
+
     resetTriePosition()
   }
 }

diff --git a/test/test.js b/test/test.js
@@ -126,6 +126,28 @@ describe('hotkey', function () {
         .dispatchEvent(new KeyboardEvent('keydown', {bubbles: true, cancelable: true, key: 'b'}))
       assert.deepEqual(elementsActivated, [])
     })
+
+    it('identifies and fires correct element for duplicated hotkeys', function () {
+      setHTML(`
+      <button id="button1" data-hotkey-scope="textfield1" data-hotkey="Meta+b">Button 1</button>
+      <input id="textfield1" />
+      <button id="button2" data-hotkey-scope="textfield2" data-hotkey="Meta+b">Button 2</button>
+      <input id="textfield2" />
+      <button id="button3" data-hotkey="Meta+b">Button 2</button>
+      `)
+      const keyboardEventArgs = {bubbles: true, metaKey: true, cancelable: true, key: 'b'}
+
+      // Scoped hotkeys
+      document.getElementById('textfield1').dispatchEvent(new KeyboardEvent('keydown', keyboardEventArgs))
+      assert.include(elementsActivated, 'button1')
+
+      document.getElementById('textfield2').dispatchEvent(new KeyboardEvent('keydown', keyboardEventArgs))
+      assert.include(elementsActivated, 'button2')
+
+      // Non-scoped hotkey
+      document.dispatchEvent(new KeyboardEvent('keydown', keyboardEventArgs))
+      assert.include(elementsActivated, 'button3')
+    })
   })
 
   describe('eventToHotkeyString', function () {