fix(ie): classList does not support variadic (#19460)

Author: manucorporat

angular/src/directives/control-value-accessors/value-accessor.ts

@@ -74,16 +74,16 @@ const getClasses = (element: HTMLElement) => {
 
 const setClasses = (element: HTMLElement, classes: string[]) => {
   const classList = element.classList;
-
-  classList.remove(
+  [
     'ion-valid',
     'ion-invalid',
     'ion-touched',
     'ion-untouched',
     'ion-dirty',
     'ion-pristine'
-  );
-  classList.add(...classes);
+  ].forEach(c => classList.remove(c));
+
+  classes.forEach(c => classList.add(c));
 };
 
 const startsWith = (input: string, search: string): boolean => {

angular/src/directives/navigation/stack-controller.ts

@@ -230,7 +230,8 @@ export class StackController {
     const leavingEl = leavingView ? leavingView.element : undefined;
     const containerEl = this.containerEl;
     if (enteringEl && enteringEl !== leavingEl) {
-      enteringEl.classList.add('ion-page', 'ion-page-invisible');
+      enteringEl.classList.add('ion-page');
+      enteringEl.classList.add('ion-page-invisible');
       if (enteringEl.parentElement !== containerEl) {
         containerEl.appendChild(enteringEl);
       }

core/src/components/tab/tab.tsx

@@ -48,7 +48,7 @@ export class Tab implements ComponentInterface {
     this.active = true;
   }
 
-  private async prepareLazyLoaded(): Promise<HTMLElement | undefined> {
+  private prepareLazyLoaded(): Promise<HTMLElement | undefined> {
     if (!this.loaded && this.component != null) {
       this.loaded = true;
       try {
@@ -57,7 +57,7 @@ export class Tab implements ComponentInterface {
         console.error(e);
       }
     }
-    return undefined;
+    return Promise.resolve(undefined);
   }
 
   render() {

core/src/components/tabs/tabs.tsx

@@ -66,7 +66,7 @@ export class Tabs implements NavOutlet {
    */
   @Method()
   async select(tab: string | HTMLIonTabElement): Promise<boolean> {
-    const selectedTab = await this.getTab(tab);
+    const selectedTab = getTab(this.tabs, tab);
     if (!this.shouldSwitch(selectedTab)) {
       return false;
     }
@@ -84,14 +84,7 @@ export class Tabs implements NavOutlet {
    */
   @Method()
   async getTab(tab: string | HTMLIonTabElement): Promise<HTMLIonTabElement | undefined> {
-    const tabEl = (typeof tab === 'string')
-      ? this.tabs.find(t => t.tab === tab)
-      : tab;
-
-    if (!tabEl) {
-      console.error(`tab with id: "${tabEl}" does not exist`);
-    }
-    return tabEl;
+    return getTab(this.tabs, tab);
   }
 
   /**
@@ -105,7 +98,7 @@ export class Tabs implements NavOutlet {
   /** @internal */
   @Method()
   async setRouteId(id: string): Promise<RouteWrite> {
-    const selectedTab = await this.getTab(id);
+    const selectedTab = getTab(this.tabs, id);
     if (!this.shouldSwitch(selectedTab)) {
       return { changed: false, element: this.selectedTab };
     }
@@ -200,3 +193,14 @@ export class Tabs implements NavOutlet {
     );
   }
 }
+
+const getTab = (tabs: HTMLIonTabElement[], tab: string | HTMLIonTabElement): HTMLIonTabElement | undefined => {
+  const tabEl = (typeof tab === 'string')
+    ? tabs.find(t => t.tab === tab)
+    : tab;
+
+  if (!tabEl) {
+    console.error(`tab with id: "${tabEl}" does not exist`);
+  }
+  return tabEl;
+};

core/src/utils/animation/animation-utils.ts

@@ -77,7 +77,7 @@ export const createKeyframeStylesheet = (keyframeName: string, keyframeRules: st
 
   const stylesheet = (element.ownerDocument || document).createElement('style');
   stylesheet.id = keyframeName;
-  stylesheet.innerHTML = `@keyframes ${keyframeName} { ${keyframeRules} } @keyframes ${keyframeName}-alt { ${keyframeRules} }`;
+  stylesheet.textContent = `@keyframes ${keyframeName} { ${keyframeRules} } @keyframes ${keyframeName}-alt { ${keyframeRules} }`;
 
   styleContainer.appendChild(stylesheet);
 

core/src/utils/animation/animation.ts

@@ -529,8 +529,8 @@ export const createAnimation = () => {
     elements.forEach((el: HTMLElement) => {
       const elementClassList = el.classList;
 
-      elementClassList.add(...addClasses);
-      elementClassList.remove(...removeClasses);
+      addClasses.forEach(c => elementClassList.add(c));
+      removeClasses.forEach(c => elementClassList.remove(c));
 
       for (const property in styles) {
         if (styles.hasOwnProperty(property)) {
@@ -578,8 +578,8 @@ export const createAnimation = () => {
     elements.forEach((el: HTMLElement) => {
       const elementClassList = el.classList;
 
-      elementClassList.add(...addClasses);
-      elementClassList.remove(...removeClasses);
+      addClasses.forEach(c => elementClassList.add(c));
+      removeClasses.forEach(c => elementClassList.remove(c));
 
       for (const property in styles) {
         if (styles.hasOwnProperty(property)) {

vue/src/components/navigation/ion-vue-router.ts

@@ -122,7 +122,8 @@ function transition(parent: Vue, props: Props, leavingEl: HTMLElement) {
   }
 
   // Add the proper Ionic classes, important for smooth transitions
-  enteringEl.classList.add('ion-page', 'ion-page-invisible');
+  enteringEl.classList.add('ion-page');
+  enteringEl.classList.add('ion-page-invisible');
 
   // Commit to the transition as soon as the Ionic Router Outlet is ready
   return ionRouterOutlet.componentOnReady().then((el: HTMLIonRouterOutletElement) => {