ionic-team / ionic-team/ionic-framework
bug: Getting undefined is not an object when showing <IonAlert>
- 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