fix(modal): make sure content is ready

fixes #14969
ionic-team · Aug 25, 2018 · 2c8bc04 · 2c8bc04
1 parent 3ffa3cd
commit 2c8bc04
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
@@ -4,6 +4,7 @@ import { Animation, AnimationBuilder, ComponentProps, ComponentRef, Config, Fram
 import { attachComponent, detachComponent } from '../../utils/framework-delegate';
 import { BACKDROP, dismiss, eventMethod, present } from '../../utils/overlays';
 import { createThemedClasses, getClassMap } from '../../utils/theme';
+import { deepReady } from '../../utils/transition';
 
 import { iosEnterAnimation } from './animations/ios.enter';
 import { iosLeaveAnimation } from './animations/ios.leave';
@@ -134,12 +135,12 @@ export class Modal implements OverlayInterface {
     const el = this.usersElement;
     const name = LIFECYCLE_MAP[modalEvent.type];
     if (el && name) {
-      const event = new CustomEvent(name, {
+      const ev = new CustomEvent(name, {
         bubbles: false,
         cancelable: false,
         detail: modalEvent.detail
       });
-      el.dispatchEvent(event);
+      el.dispatchEvent(ev);
     }
   }
 
@@ -160,6 +161,7 @@ export class Modal implements OverlayInterface {
       modal: this.el
     };
     this.usersElement = await attachComponent(this.delegate, container, this.component, ['ion-page'], componentProps);
+    await deepReady(this.usersElement);
     return present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation);
   }
 

diff --git a/core/src/utils/framework-delegate.ts b/core/src/utils/framework-delegate.ts
@@ -1,6 +1,12 @@
 import { ComponentRef, FrameworkDelegate } from '../interface';
 
-export async function attachComponent(delegate: FrameworkDelegate | undefined, container: Element, component: ComponentRef, cssClasses?: string[], componentProps?: {[key: string]: any}): Promise<HTMLElement> {
+export async function attachComponent(
+  delegate: FrameworkDelegate | undefined,
+  container: Element,
+  component: ComponentRef,
+  cssClasses?: string[],
+  componentProps?: {[key: string]: any}
+): Promise<HTMLElement> {
   if (delegate) {
     return delegate.attachViewToDom(container, component, componentProps, cssClasses);
   }

diff --git a/core/src/utils/transition.ts b/core/src/utils/transition.ts
@@ -174,7 +174,7 @@ function shallowReady(el: Element | undefined): Promise<any> {
   return Promise.resolve();
 }
 
-async function deepReady(el: Element | undefined): Promise<void> {
+export async function deepReady(el: Element | undefined): Promise<void> {
   const element = el as HTMLStencilElement;
   if (element) {
     if (element.componentOnReady) {