bug(overlay): alert/modal not showing with element build (5.6.0) #23029
Description
Bug Report
Ionic version:
[x] 5.6.0
Behavior:
The following code should display an alert with the custom element build introduced in 5.6.0
const alert = await alertController.create({...});
await alert.present();However alert is undefined and await alert.present(); errors.
The root cause seems to be that IonAlert.componentOnReady is undefined then
const componentOnReady = (el, callback) => {
if (el.componentOnReady) {
el.componentOnReady().then(callback);
}
else {
callback();
}
};the callback is called from the else branch from createOverlay
const createOverlay = (tagName, opts) => {
/* tslint:disable-next-line */
if (typeof customElements !== 'undefined') {
return customElements.whenDefined(tagName).then(() => {
const element = document.createElement(tagName);
element.classList.add('overlay-hidden');
// convert the passed in overlay options into props
// that get passed down into the new overlay
Object.assign(element, opts);
// append the overlay element to the document body
getAppRoot(document).appendChild(element);
return new Promise(resolve => componentOnReady(element, resolve));
});
}
return Promise.resolve();
};resulting in the inner Promise being resolved to undefined.
See https://stackblitz.com/edit/js-7d4zxa?file=index.js for a repro.
An alert should be shown when clicking the button.
Other information:
- If you select the
<ion-alert>via the dev tools and call itspresent()method then the alert is shown as expected. - the same issue exists with the
modalController.