From bf7ee1ea5de6e493647c005d5a0efbc770153e27 Mon Sep 17 00:00:00 2001
From: Serhii Kulykov <iamkulykov@gmail.com>
Date: Tue, 7 May 2024 09:26:57 +0300
Subject: [PATCH] fix: do not throw when overlayClass is set to empty string
 (#7386)

---
 .../component-base/src/overlay-class-mixin.js |  2 +-
 .../test/overlay-class-mixin.test.js          | 22 +++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/component-base/src/overlay-class-mixin.js b/packages/component-base/src/overlay-class-mixin.js
index b7ca6ee2ec..fb0e3a86b4 100644
--- 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
index 4124e7124c..b09b4f4af7 100644
--- 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', () => {