fix(overlay): using hostData for zIndex

packages/core/src/components/action-sheet/action-sheet.tsx

@@ -146,8 +146,6 @@ export class ActionSheet implements OverlayInterface {
 
     this.ionActionSheetWillPresent.emit();
 
-    this.el.style.zIndex = `${20000 + this.overlayId}`;
-
     // get the user's animation fn if one was provided
     const animationBuilder = this.enterAnimation || this.config.get('actionSheetEnter', this.mode === 'ios' ? iosEnterAnimation : mdEnterAnimation);
 
@@ -198,6 +196,9 @@ export class ActionSheet implements OverlayInterface {
     const themedClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'action-sheet-translucent') : {};
 
     return {
+      style: {
+        zIndex: 20000 + this.overlayId,
+      },
       class: {
         ...themedClasses,
         ...getClassMap(this.cssClass)

packages/core/src/components/alert/alert.tsx

@@ -1,8 +1,8 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
 import { Animation, AnimationBuilder, Config, CssClassMap, DomController, OverlayDismissEvent, OverlayDismissEventDetail } from '../../index';
-import { autoFocus, domControllerAsync } from '../../utils/helpers';
+import { domControllerAsync } from '../../utils/helpers';
 import { createThemedClasses, getClassMap } from '../../utils/theme';
-import { BACKDROP, OverlayInterface, overlayAnimation } from '../../utils/overlays';
+import { BACKDROP, OverlayInterface, autoFocus, overlayAnimation } from '../../utils/overlays';
 
 import iosEnterAnimation from './animations/ios.enter';
 import iosLeaveAnimation from './animations/ios.leave';
@@ -128,10 +128,6 @@ export class Alert implements OverlayInterface {
     this.ionAlertDidLoad.emit();
   }
 
-  componentDidEnter() {
-    this.ionAlertDidPresent.emit();
-  }
-
   componentDidUnload() {
     this.ionAlertDidUnload.emit();
   }
@@ -152,8 +148,6 @@ export class Alert implements OverlayInterface {
     this.presented = true;
     this.ionAlertWillPresent.emit();
 
-    this.el.style.zIndex = `${20000 + this.overlayId}`;
-
     // get the user's animation fn if one was provided
     const animationBuilder = this.enterAnimation || this.config.get('alertEnter', this.mode === 'ios' ? iosEnterAnimation : mdEnterAnimation);
 
@@ -337,6 +331,9 @@ export class Alert implements OverlayInterface {
 
     return {
       role: 'alertdialog',
+      style: {
+        zIndex: 20000 + this.overlayId,
+      },
       class: {
         ...themedClasses,
         ...getClassMap(this.cssClass)

packages/core/src/components/loading/loading.tsx

@@ -158,8 +158,6 @@ export class Loading implements OverlayInterface {
     this.presented = true;
     this.ionLoadingWillPresent.emit();
 
-    this.el.style.zIndex = `${20000 + this.overlayId}`;
-
     // get the user's animation fn if one was provided
     const animationBuilder = this.enterAnimation || this.config.get('loadingEnter', this.mode === 'ios' ? iosEnterAnimation : mdEnterAnimation);
 
@@ -208,6 +206,9 @@ export class Loading implements OverlayInterface {
     const themedClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'loading-translucent') : {};
 
     return {
+      style: {
+        zIndex: 20000 + this.overlayId,
+      },
       class: {
         ...themedClasses,
         ...getClassMap(this.cssClass)

packages/core/src/components/menu/menu.tsx

@@ -237,8 +237,10 @@ export class Menu {
       return Promise.resolve();
     }
     // Destroy existing animation
-    this.animation && this.animation.destroy();
+    if (this.animation) {
-    this.animation = null;
+      this.animation.destroy();
+      this.animation = null;
+    }
     this.width = width;
 
     // Create new animation

packages/core/src/components/modal/modal.tsx

@@ -155,8 +155,6 @@ export class Modal implements OverlayInterface {
     this.presented = true;
     this.ionModalWillPresent.emit();
 
-    this.el.style.zIndex = `${20000 + this.overlayId}`;
-
     // get the user's animation fn if one was provided
     const animationBuilder = this.enterAnimation || this.config.get('modalEnter', this.mode === 'ios' ? iosEnterAnimation : mdEnterAnimation);
 
@@ -222,6 +220,14 @@ export class Modal implements OverlayInterface {
     return this.el.querySelector(`.${USER_COMPONENT_MODAL_CONTAINER_CLASS}`);
   }
 
+  hostData() {
+    return {
+      style: {
+        zIndex: 20000 + this.overlayId,
+      }
+    }
+  }
+
   render() {
     const dialogClasses = createThemedClasses(this.mode, this.color, 'modal-wrapper');
 

packages/core/src/components/picker/picker.tsx

@@ -163,15 +163,8 @@ export class Picker implements OverlayInterface {
     }
     this.presented = true;
 
-    if (this.animation) {
-      this.animation.destroy();
-      this.animation = null;
-    }
-
     this.ionPickerWillPresent.emit();
 
-    this.el.style.zIndex = `${20000 + this.overlayId}`;
-
     // get the user's animation fn if one was provided
     const animationBuilder = this.enterAnimation || this.config.get('pickerEnter', iosEnterAnimation);
 
@@ -271,6 +264,14 @@ export class Picker implements OverlayInterface {
     return selected;
   }
 
+  hostData() {
+    return {
+      style: {
+        zIndex: 20000 + this.overlayId,
+      }
+    }
+  }
+
   render() {
     // TODO: cssClass
 

packages/core/src/components/popover/popover.tsx

@@ -131,6 +131,12 @@ export class Popover implements OverlayInterface {
    */
   @Event() ionPopoverDidUnload: EventEmitter<PopoverEventDetail>;
 
+  componentWillLoad() {
+    if (!this.delegate) {
+      this.delegate = new DomFrameworkDelegate();
+    }
+  }
+
   componentDidLoad() {
     this.ionPopoverDidLoad.emit();
   }
@@ -164,15 +170,10 @@ export class Popover implements OverlayInterface {
 
     this.ionPopoverWillPresent.emit();
 
-    this.el.style.zIndex = `${10000 + this.overlayId}`;
-
     // get the user's animation fn if one was provided
     const animationBuilder = this.enterAnimation || this.config.get('popoverEnter', this.mode === 'ios' ? iosEnterAnimation : mdEnterAnimation);
 
     const userComponentParent = this.el.querySelector(`.${USER_COMPONENT_POPOVER_CONTAINER_CLASS}`);
-    if (!this.delegate) {
-      this.delegate = new DomFrameworkDelegate();
-    }
 
     const cssClasses: string[] = [];
     if (this.cssClass && this.cssClass.length) {
@@ -203,17 +204,9 @@ export class Popover implements OverlayInterface {
       return Promise.reject('overlay is not presented');
     }
     this.presented = false;
-    if (this.animation) {
-      this.animation.destroy();
-      this.animation = null;
-    }
 
     this.ionPopoverWillDismiss.emit({ data, role });
 
-    if (!this.delegate) {
-      this.delegate = new DomFrameworkDelegate();
-    }
-
     const animationBuilder = this.leaveAnimation || this.config.get('popoverLeave', this.mode === 'ios' ? iosLeaveAnimation : mdLeaveAnimation);
 
     return this.playAnimation(animationBuilder).then(() => {
@@ -235,6 +228,9 @@ export class Popover implements OverlayInterface {
     const themedClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'popover-translucent') : {};
 
     return {
+      style: {
+        zIndex: 10000 + this.overlayId,
+      },
       class: {
         ...themedClasses
       }

packages/core/src/utils/helpers.ts

@@ -15,16 +15,6 @@ export function assert(actual: any, reason: string) {
   }
 }
 
-export function autoFocus(containerEl: HTMLElement): HTMLElement|null {
-  const focusableEls = containerEl.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]');
-  if (focusableEls.length > 0) {
-    const el = focusableEls[0] as HTMLInputElement;
-    el.focus();
-    return el;
-  }
-  return null;
-}
-
 export function now(ev: UIEvent) {
   return ev.timeStamp || Date.now();
 }

packages/core/src/utils/overlays.ts

@@ -76,6 +76,16 @@ export function overlayAnimation(
   });
 }
 
+export function autoFocus(containerEl: HTMLElement): HTMLElement {
+  const focusableEls = containerEl.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]');
+  if (focusableEls.length > 0) {
+    const el = focusableEls[0] as HTMLInputElement;
+    el.focus();
+    return el;
+  }
+  return null;
+}
+
 export interface OverlayInterface {
   overlayId: number;
   animation: Animation|undefined;