From e1893f2c5d38a8f2003e6a6f75fe4961443b11ed Mon Sep 17 00:00:00 2001
From: Mikko Ahonen <36728682+mikko-ahonen@users.noreply.github.com>
Date: Wed, 24 Apr 2024 15:05:26 +0300
Subject: [PATCH] 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                 | 1 +
 packages/docs/src/en/directives/on.md             | 1 +
 tests/cypress/integration/directives/x-on.spec.js | 3 +++
 3 files changed, 5 insertions(+)

diff --git a/packages/alpinejs/src/utils/on.js b/packages/alpinejs/src/utils/on.js
index af6df6f9f..c50fa7ff8 100644
--- a/packages/alpinejs/src/utils/on.js
+++ b/packages/alpinejs/src/utils/on.js
@@ -169,6 +169,7 @@ function keyToModifiers(key) {
         'left': 'arrow-left',
         'right': 'arrow-right',
         'period': '.',
+        'comma': ',',
         'equal': '=',
         'minus': '-',
         'underscore': '_',
diff --git a/packages/docs/src/en/directives/on.md b/packages/docs/src/en/directives/on.md
index f51cc9689..735e8eee9 100644
--- a/packages/docs/src/en/directives/on.md
+++ b/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>
diff --git a/tests/cypress/integration/directives/x-on.spec.js b/tests/cypress/integration/directives/x-on.spec.js
index 2704000d3..62c6f2752 100644
--- a/tests/cypress/integration/directives/x-on.spec.js
+++ b/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'))
     }
 )