Merge pull request alpinejs#437 from felixsc/master

Fix whitespace bug in x-bind:class class list
monkenWu · May 8, 2020 · e32bea0 · e32bea0
2 parents c116279 + 35ec9db
commit e32bea0
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 9 deletions.
diff --git a/dist/alpine-ie11.js b/dist/alpine-ie11.js
@@ -6019,13 +6019,13 @@
           _newArrowCheck(this, _this);
 
           if (value[classNames]) {
-            classNames.split(' ').forEach(function (className) {
+            classNames.split(' ').filter(Boolean).forEach(function (className) {
               _newArrowCheck(this, _this2);
 
               return el.classList.add(className);
             }.bind(this));
           } else {
-            classNames.split(' ').forEach(function (className) {
+            classNames.split(' ').filter(Boolean).forEach(function (className) {
               _newArrowCheck(this, _this2);
 
               return el.classList.remove(className);
@@ -6035,7 +6035,7 @@
       } else {
         var _originalClasses = el.__x_original_classes || [];
 
-        var newClasses = value.split(' ');
+        var newClasses = value.split(' ').filter(Boolean);
         el.setAttribute('class', arrayUnique(_originalClasses.concat(newClasses)).join(' '));
       }
     } else if (isBooleanAttr(attrName)) {

diff --git a/dist/alpine.js b/dist/alpine.js
@@ -574,14 +574,14 @@
         const keysSortedByBooleanValue = Object.keys(value).sort((a, b) => value[a] - value[b]);
         keysSortedByBooleanValue.forEach(classNames => {
           if (value[classNames]) {
-            classNames.split(' ').forEach(className => el.classList.add(className));
+            classNames.split(' ').filter(Boolean).forEach(className => el.classList.add(className));
           } else {
-            classNames.split(' ').forEach(className => el.classList.remove(className));
+            classNames.split(' ').filter(Boolean).forEach(className => el.classList.remove(className));
           }
         });
       } else {
         const originalClasses = el.__x_original_classes || [];
-        const newClasses = value.split(' ');
+        const newClasses = value.split(' ').filter(Boolean);
         el.setAttribute('class', arrayUnique(originalClasses.concat(newClasses)).join(' '));
       }
     } else if (isBooleanAttr(attrName)) {

diff --git a/src/directives/bind.js b/src/directives/bind.js
@@ -67,14 +67,14 @@ export function handleAttributeBindingDirective(component, el, attrName, express
 
             keysSortedByBooleanValue.forEach(classNames => {
                 if (value[classNames]) {
-                    classNames.split(' ').forEach(className => el.classList.add(className))
+                    classNames.split(' ').filter(Boolean).forEach(className => el.classList.add(className))
                 } else {
-                    classNames.split(' ').forEach(className => el.classList.remove(className))
+                    classNames.split(' ').filter(Boolean).forEach(className => el.classList.remove(className))
                 }
             })
         } else {
             const originalClasses = el.__x_original_classes || []
-            const newClasses = value.split(' ')
+            const newClasses = value.split(' ').filter(Boolean)
             el.setAttribute('class', arrayUnique(originalClasses.concat(newClasses)).join(' '))
         }
     } else if (isBooleanAttr(attrName)) {

diff --git a/test/bind.spec.js b/test/bind.spec.js
@@ -420,3 +420,14 @@ test('setSelectionRange is not called for inapplicable input types', async () =>
         expect(document.querySelector('input').value).toEqual('baz')
     })
 })
+
+test('unnecessary whitespaces in class list are ignored', async () => {
+    document.body.innerHTML = `
+    <div x-data="{ foo: 'bar' }">
+        <span x-bind:class="{'   foo:class ': foo === 'bar' }"></span>
+    </div>
+    `
+    Alpine.start()
+
+    expect(document.querySelector('span').classList.contains('foo:class')).toBeTruthy()
+})