bug: Getting undefined is not an object when showing <IonAlert>

[kevinswartz]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x, v8.x

Current Behavior

Hi guys, thanks for all your work here, it's a great project. We are using @ionic/core and @ionic/react v8.4.0. We recently released a new version of our app, and we're seeing a a number of instances of this error via sentry:

undefined is not an object (evaluating '(null===(e=this.wrapperEl)||void 0===e?void 0:e.querySelector(".alert-button")).focus')

I am unable to reproduce anything locally, but I can see many instances of the problem in our logging. Here's the code I use to render our alert:

<IonAlert
        isOpen={isDialogOpen}
        backdropDismiss={false}
        onDidDismiss={() => this.doClose()}
        header={title}
        message={text}
        buttons={[{
          text: okText ? okText : t('OK'),
          handler: () => {
            this.doClose();
          },
        }]}
      />

I can verify that title, text, and t('OK') are populated.
Looking in the ionic code, it appears that this error is coming from alert.js here:

 async present() {
        const unlock = await this.lockController.lock();
        await this.delegateController.attachViewToDom();
        await present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation).then(() => {
            var _a, _b;
            /**
             * Check if alert has only one button and no inputs.
             * If so, then focus on the button. Otherwise, focus the alert wrapper.
             * This will map to the default native alert behavior.
             */
            if (this.buttons.length === 1 && this.inputs.length === 0) {
                const queryBtn = (_a = this.wrapperEl) === null || _a === void 0 ? void 0 : _a.querySelector('.alert-button');
                queryBtn.focus();
            }
            else {
                (_b = this.wrapperEl) === null || _b === void 0 ? void 0 : _b.focus();
            }
        });
        unlock();
    }

Any suggestions of how to improve our code or ionic's is much appreciated. Thanks!

Expected Behavior

I would expect showing an alert to never crash, regardless of the text I pass in.

Steps to Reproduce

We have been unable to reproduce, this is just coming in through our logging in Sentry.

Code Reproduction URL

https://github.com/ionic-team/ionic-framework

Ionic Info

Ionic:

Ionic CLI : 7.2.1 (/Users/.../.nvm/versions/node/v22.14.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 8.5.4

Capacitor:

Capacitor CLI : 7.2.0
@capacitor/android : 7.2.0
@capacitor/core : 7.2.0
@capacitor/ios : 7.2.0

Utility:

cordova-res : 0.15.4
native-run : 2.0.1

System:

NodeJS : v22.14.0 (/Users/.../.nvm/versions/node/v22.14.0/bin/node)
npm : 10.9.2
OS : macOS Unknown

Additional Information

If I had a reproduction I would happily give it. It seems to me like a guard on queryBtn being undefined is enough: queryBtn.focus();

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.