diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx index 18aaec6f695..f5523ed845f 100644 --- 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 index d2cbe67d8f3..05734dc36f9 100644 --- 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 { +export async function attachComponent( + delegate: FrameworkDelegate | undefined, + container: Element, + component: ComponentRef, + cssClasses?: string[], + componentProps?: {[key: string]: any} +): Promise { if (delegate) { return delegate.attachViewToDom(container, component, componentProps, cssClasses); } diff --git a/core/src/utils/transition.ts b/core/src/utils/transition.ts index ea53da44e96..3882559d029 100644 --- a/core/src/utils/transition.ts +++ b/core/src/utils/transition.ts @@ -174,7 +174,7 @@ function shallowReady(el: Element | undefined): Promise { return Promise.resolve(); } -async function deepReady(el: Element | undefined): Promise { +export async function deepReady(el: Element | undefined): Promise { const element = el as HTMLStencilElement; if (element) { if (element.componentOnReady) {