ionic-team / ionic-team/ionic-framework
bug: Getting undefined is not an object when showing <IonAlert>
- 主要言語
- TypeScript
- スター
- 52.7k
- フォーク
- 13.3k
- 平均マージ
- 1日 15時間
- マージ済み PR(30日)
- 51
説明
### 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();`
コントリビューションガイド
評価
この issue はまだ評価されていません。