:bug: prevents coercion of space and underscore to minus (#3134)

* :test_tube: Adds test for checking key discernment

Expanding the keydown modifiers test introduced some issues regarding ensuring the these options were all treated separately without overlap.

* :white_check_mark: :bug: Fixes coercion of space and underscore

* :construction: Completes Test

Co-authored-by: Marc Reichel <mail@marcreichel.de>

Co-authored-by: Marc Reichel <mail@marcreichel.de>

packages/alpinejs/src/utils/on.js

@@ -93,6 +93,8 @@ function isNumeric(subject){
 }
 
 function kebabCase(subject) {
+    if ([' ','_'].includes(subject
+    )) return subject
     return subject.replace(/([a-z])([A-Z])/g, '$1-$2').replace(/[_\s]/, '-').toLowerCase()
 }
 
@@ -154,8 +156,8 @@ function keyToModifiers(key) {
     let modifierToKeyMap = {
         'ctrl': 'control',
         'slash': '/',
-        'space': '-',
-        'spacebar': '-',
+        'space': ' ',
+        'spacebar': ' ',
         'cmd': 'meta',
         'esc': 'escape',
         'up': 'arrow-up',
@@ -164,6 +166,8 @@ function keyToModifiers(key) {
         'right': 'arrow-right',
         'period': '.',
         'equal': '=',
+        'minus': '-',
+        'underscore': '_',
     }
 
     modifierToKeyMap[key] = key

tests/cypress/integration/directives/x-on.spec.js

@@ -346,6 +346,31 @@ test('keydown modifiers',
     }
 )
 
+test('discerns between space minus underscore',
+    html`
+        <div x-data="{ count: 0 }">
+            <input id="space" type="text" x-on:keydown.space="count++" />
+            <input id="minus" type="text" x-on:keydown.-="count++" />
+            <input id="underscore" type="text" x-on:keydown._="count++" />
+            <span x-text="count"></span>
+        </div>
+    `,
+    ({get}) => {
+        get('span').should(haveText('0'))
+        get('#space').type(' ')
+        get('span').should(haveText('1'))
+        get('#space').type('-')
+        get('span').should(haveText('1'))
+        get('#minus').type('-')
+        get('span').should(haveText('2'))
+        get('#minus').type(' ')
+        get('span').should(haveText('2'))
+        get('#underscore').type('_')
+        get('span').should(haveText('3'))
+        get('#underscore').type(' ')
+        get('span').should(haveText('3'))
+    })
+
 test('keydown combo modifiers',
     html`
         <div x-data="{ count: 0 }">