ionic-team / ionic-team/ionic-framework

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

Ouverte
#30,701 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub
ionitron: needs reproduction
Langage dominant
TypeScript
Étoiles
52.7k
Forks
13.3k
Merge moyen
1 j 15 h
PR mergées (30 j)
51

Description

### 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();`

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Begin with alert.js and the present() entry point shown in the report. Trace when wrapperEl or its .alert-button query can be absent during presentation, then verify an alert with one button does not crash when that element is unavailable. Done means the reported focus path safely handles that state.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
react, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
2/5
Temps estimé
1-3 heures
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
48/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.