✅ Allows underscore in event names (#3756)

alpinejs · Oct 18, 2023 · 6cecc7d · 6cecc7d
1 parent b124ed7
commit 6cecc7d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/packages/alpinejs/src/directives.js b/packages/alpinejs/src/directives.js
@@ -182,7 +182,7 @@ let alpineAttributeRegex = () => (new RegExp(`^${prefixAsString}([^:^.]+)\\b`))
 function toParsedDirectives(transformedAttributeMap, originalAttributeOverride) {
     return ({ name, value }) => {
         let typeMatch = name.match(alpineAttributeRegex())
-        let valueMatch = name.match(/:([a-zA-Z0-9\-:]+)/)
+        let valueMatch = name.match(/:([a-zA-Z0-9\-_:]+)/)
         let modifiers = name.match(/\.[^.\]]+(?=[^\]]*$)/g) || []
         let original = originalAttributeOverride || transformedAttributeMap[name] || name
 

diff --git a/tests/cypress/integration/directives/x-on.spec.js b/tests/cypress/integration/directives/x-on.spec.js
@@ -585,6 +585,20 @@ test('.dot modifier correctly binds event listener',
         get('span').should(haveText('baz'))
     }
 )
+test('underscores are allowed in event names',
+    html`
+        <div x-data="{ foo: 'bar' }" x-on:event_name="foo = 'baz'">
+            <button x-on:click="$dispatch('event_name')"></button>
+
+            <span x-text="foo"></span>
+        </div>
+    `,
+    ({ get }) => {
+        get('span').should(haveText('bar'))
+        get('button').click()
+        get('span').should(haveText('baz'))
+    }
+)
 
 test('.dot modifier correctly binds event listener with namespace',
     html`