bug(overlay): alert/modal not showing with element build (5.6.0)

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 its present() method then the alert is shown as expected.
  • the same issue exists with the modalController.

1 possible answer(s) on “bug(overlay): alert/modal not showing with element build (5.6.0)

  1. Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue?

    npm install @ionic/core@5.7.0-dev.202103121659.630848a