ionic-team / ionic-team/ionic-framework

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

Abierto
#30,701 1 comentario 0 reacciones 0 asignados Ver en GitHub
ionitron: needs reproduction
Lenguaje dominante
TypeScript
Estrellas
52.7k
Forks
13.3k
Merge medio
1 d 15 h
PR fusionados (30 d)
51

Descripción

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/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:
```
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();`

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.