Merge pull request #80 from akenneth/file_input_support

Allow hotkeys when focusing on `file` input elements
github · Jul 21, 2022 · f11dd2a · f11dd2a
2 parents 24fa9ae + 408ce14
commit f11dd2a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/utils.ts b/src/utils.ts
@@ -8,7 +8,12 @@ export function isFormField(element: Node): boolean {
   return (
     name === 'select' ||
     name === 'textarea' ||
-    (name === 'input' && type !== 'submit' && type !== 'reset' && type !== 'checkbox' && type !== 'radio') ||
+    (name === 'input' &&
+      type !== 'submit' &&
+      type !== 'reset' &&
+      type !== 'checkbox' &&
+      type !== 'radio' &&
+      type !== 'file') ||
     element.isContentEditable
   )
 }

diff --git a/test/test.js b/test/test.js
@@ -72,10 +72,18 @@ describe('hotkey', function () {
       setHTML(`
       <button id="button1" data-hotkey="b">Button 1</button>
       <input id="textfield" />`)
-      document.getElementById('textfield').dispatchEvent(new KeyboardEvent('keydown', {key: 'b'}))
+      document.getElementById('textfield').dispatchEvent(new KeyboardEvent('keydown', {bubbles: true, key: 'b'}))
       assert.deepEqual(elementsActivated, [])
     })
 
+    it('triggers when user is focused on a file input', function () {
+      setHTML(`
+      <button id="button1" data-hotkey="b">Button 1</button>
+      <input id="filefield" type="file" />`)
+      document.getElementById('filefield').dispatchEvent(new KeyboardEvent('keydown', {bubbles: true, key: 'b'}))
+      assert.deepEqual(elementsActivated, ['button1'])
+    })
+
     it('handles multiple keys in a hotkey combination', function () {
       setHTML('<button id="button3" data-hotkey="Control+c">Button 3</button>')
       document.dispatchEvent(new KeyboardEvent('keydown', {key: 'c', ctrlKey: true}))