ionic-team / ionic-team/ionic-framework

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

Đang mở
#30,701 1 bình luận 0 reaction 0 người được giao Xem trên GitHub
ionitron: needs reproduction
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.