Merge pull request #389 from zupolgec/fix-key-events-detection

Fixed detection of KeyboardEvents

dist/alpine-ie11.js

@@ -6341,7 +6341,7 @@
         return 'space';
 
       default:
-        return kebabCase(key);
+        return key && kebabCase(key);
     }
   }
 

dist/alpine.js

@@ -821,7 +821,7 @@
         return 'space';
 
       default:
-        return kebabCase(key);
+        return key && kebabCase(key);
     }
   }
 

src/directives/on.js

@@ -123,6 +123,6 @@ function keyToModifier(key) {
         case 'Spacebar':
             return 'space'
         default:
-            return kebabCase(key)
+            return key && kebabCase(key)
     }
 }

test/on.spec.js

@@ -408,3 +408,31 @@ test('event instance is passed to method reference', async () => {
 
     expect(document.querySelector('span').innerText).toEqual('baz')
 })
+
+test('autocomplete event does not trigger keydown with modifier callback', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ count: 0 }">
+            <input type="text" x-on:keydown.?="count++">
+
+            <span x-text="count"></span>
+        </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('span').innerText).toEqual(0)
+
+    const autocompleteEvent = new Event('keydown')
+
+    fireEvent.keyDown(document.querySelector('input'), { key: 'Enter' })
+
+    await wait(() => { expect(document.querySelector('span').innerText).toEqual(0) })
+
+    fireEvent.keyDown(document.querySelector('input'), { key: '?' })
+
+    await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) })
+
+    fireEvent(document.querySelector('input'), autocompleteEvent)
+
+    await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) })
+})