🐛 Allows Booleans in bound x-transitions (#3519)

alpinejs · May 10, 2023 · ec73d44 · ec73d44
1 parent 36156c2
commit ec73d44
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git a/packages/alpinejs/src/directives/x-transition.js b/packages/alpinejs/src/directives/x-transition.js
@@ -7,8 +7,8 @@ import { once } from '../utils/once'
 
 directive('transition', (el, { value, modifiers, expression }, { evaluate }) => {
     if (typeof expression === 'function') expression = evaluate(expression)
-
-    if (! expression) {
+    if (expression === false) return
+    if (!expression || typeof expression === 'boolean') {
         registerTransitionsFromHelper(el, modifiers, value)
     } else {
         registerTransitionsFromClassString(el, expression, value)

diff --git a/tests/cypress/integration/directives/x-transition.spec.js b/tests/cypress/integration/directives/x-transition.spec.js
@@ -80,3 +80,31 @@ test('transition:enter in nested x-show visually runs',
         get('h1').should(haveComputedStyle('opacity', '1')) // Eventually opacity will be 1
     }
 )
+
+test(
+    'bound x-transition can handle empty string and true values',
+    html`
+        <script>
+            window.transitions = () => {
+                return {
+                    withEmptyString: {
+                        ["x-transition.opacity"]: "",
+                    },
+                    withBoolean: {
+                        ["x-transition.opacity"]: true,
+                    },
+                };
+            };
+        </script>
+        <div x-data="transitions()">
+            <button x-bind="withEmptyString"></button>
+            <span x-bind="withBoolean">thing</span>
+        </div>
+    `,
+    ({ get }) => 
+        {
+            get('span').should(beVisible())
+            get('span').should(beVisible())
+        }
+
+);