Comma modifier to keyup and keydown events (#4170)

* Added "comma" modifier to keydown and keyup events

* Tests for "comma" modifier for keyup and keydown events

* Documentation update for "comma" modifier for keyup and keydown events

---------

Co-authored-by: Mikko Ahonen <mikko@tanssi.io>

packages/alpinejs/src/utils/on.js

@@ -169,6 +169,7 @@ function keyToModifiers(key) {
         'left': 'arrow-left',
         'right': 'arrow-right',
         'period': '.',
+        'comma': ',',
         'equal': '=',
         'minus': '-',
         'underscore': '_',

packages/docs/src/en/directives/on.md

@@ -89,6 +89,7 @@ For easy reference, here is a list of common keys you may want to listen for.
 | `.caps-lock`                | Caps Lock                   |
 | `.equal`                    | Equal, `=`                  |
 | `.period`                   | Period, `.`                 |
+| `.comma`                    | Comma, `,`                  |
 | `.slash`                    | Forward Slash, `/`           |
 
 <a name="custom-events"></a>

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

@@ -397,6 +397,7 @@ test('keydown modifiers',
                 x-on:keydown.slash="count++"
                 x-on:keydown.period="count++"
                 x-on:keydown.equal="count++"
+                x-on:keydown.comma="count++"
             >
 
             <span x-text="count"></span>
@@ -430,6 +431,8 @@ test('keydown modifiers',
         get('span').should(haveText('25'))
         get('input').type('.')
         get('span').should(haveText('27'))
+        get('input').type(',')
+        get('span').should(haveText('29'))
     }
 )