fix: do not throw when overlayClass is set to empty string (#7386) (#…

…7388) Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
vaadin · May 7, 2024 · b5a6968 · b5a6968
1 parent 3cbb185
commit b5a6968
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/packages/component-base/src/overlay-class-mixin.js b/packages/component-base/src/overlay-class-mixin.js
@@ -69,7 +69,7 @@ export const OverlayClassMixin = (superclass) =>
       }
 
       // Add new classes based on the overlayClass
-      const classesToAdd = typeof overlayClass === 'string' ? overlayClass.split(' ') : [];
+      const classesToAdd = typeof overlayClass === 'string' ? overlayClass.split(' ').filter(Boolean) : [];
       if (classesToAdd.length > 0) {
         classList.add(...classesToAdd);
       }

diff --git a/packages/component-base/test/overlay-class-mixin.test.js b/packages/component-base/test/overlay-class-mixin.test.js
@@ -68,6 +68,28 @@ const runTests = (defineHelper, baseMixin) => {
       expect(overlay.classList.contains('foo')).to.be.true;
       expect(overlay.classList.contains('bar')).to.be.false;
     });
+
+    it('should remove class names when setting empty string', async () => {
+      element.overlayClass = 'foo bar';
+      await nextUpdate(element);
+
+      element.overlayClass = '';
+      await nextUpdate(element);
+
+      expect(overlay.classList.contains('foo')).to.be.false;
+      expect(overlay.classList.contains('bar')).to.be.false;
+    });
+
+    it('should remove class names when setting whitespace string', async () => {
+      element.overlayClass = 'foo bar';
+      await nextUpdate(element);
+
+      element.overlayClass = ' ';
+      await nextUpdate(element);
+
+      expect(overlay.classList.contains('foo')).to.be.false;
+      expect(overlay.classList.contains('bar')).to.be.false;
+    });
   });
 
   describe('custom classes', () => {