refactor(cdk/overlay): use classList.toggle

With Angular dropping IE11 support in version 13, we can now use `classList.toggle` with the second `force` param. Related to #7374
angular · Sep 14, 2021 · f4a54d6 · f4a54d6
1 parent d897a0c
commit f4a54d6
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
diff --git a/src/cdk/overlay/overlay-ref.ts b/src/cdk/overlay/overlay-ref.ts
@@ -469,15 +469,11 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
 
   /** Toggles a single CSS class or an array of classes on an element. */
   private _toggleClasses(element: HTMLElement, cssClasses: string | string[], isAdd: boolean) {
-    const classList = element.classList;
+    const classes = coerceArray(cssClasses || []).filter(c => !!c);
 
-    coerceArray(cssClasses).forEach(cssClass => {
-      // We can't do a spread here, because IE doesn't support setting multiple classes.
-      // Also trying to add an empty string to a DOMTokenList will throw.
-      if (cssClass) {
-        isAdd ? classList.add(cssClass) : classList.remove(cssClass);
-      }
-    });
+    if (classes.length) {
+      isAdd ? element.classList.add(...classes) : element.classList.remove(...classes);
+    }
   }
 
   /** Detaches the overlay content next time the zone stabilizes. */

diff --git a/src/cdk/overlay/overlay.spec.ts b/src/cdk/overlay/overlay.spec.ts
@@ -451,8 +451,17 @@ describe('Overlay', () => {
     const overlayRef = overlay.create();
     overlayRef.attach(componentPortal);
 
+    // Empty string
     expect(() => overlayRef.addPanelClass('')).not.toThrow();
     expect(() => overlayRef.removePanelClass('')).not.toThrow();
+
+    // Empty array
+    expect(() => overlayRef.addPanelClass([])).not.toThrow();
+    expect(() => overlayRef.removePanelClass([])).not.toThrow();
+
+    // Array containing only the empty string
+    expect(() => overlayRef.addPanelClass([''])).not.toThrow();
+    expect(() => overlayRef.removePanelClass([''])).not.toThrow();
   });
 
   describe('positioning', () => {

diff --git a/src/dev-app/connected-overlay/connected-overlay-demo.ts b/src/dev-app/connected-overlay/connected-overlay-demo.ts
@@ -106,11 +106,7 @@ export class ConnectedOverlayDemo {
     const box = document.querySelector<HTMLElement>('.cdk-overlay-connected-position-bounding-box');
 
     if (box) {
-      if (showBoundingBox) {
-        box.classList.add('demo-bounding-box-visible');
-      } else {
-        box.classList.remove('demo-bounding-box-visible');
-      }
+      box.classList.toggle('demo-bounding-box-visible', showBoundingBox);
     }
   }
 }