ionic-team / ionic-team/ionic-framework

bug: canDismiss in ion-modal is trigger twice when backdrop is click

未关闭
#30,028 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
triage
主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
1 天 15 小时
30 天内合并 PR
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

v8.x

### Current Behavior

When attaching the `canDismiss` callback function to a modal, the function is correctly triggered when using the `dismiss()` function.

However, if we click on the modal backdrop to dismiss it, the `canDismiss` function is triggered **twice**.

This issue might be related to using the standalone API with `provideIonicAngular()`. In the [documentation example](https://ionicframework.com/docs/api/modal#setting-a-callback-function) which uses the module-based approach, this problem does not occur.

Additionally, this issue does not occur when dismissing the modal with the `ESC` key.

https://github.com/user-attachments/assets/defaa84a-7b96-4417-b730-a10489806782

### Expected Behavior

The `canDismiss` callback function should only be triggered once, regardless of how the modal is dismissed (e.g., using `dismiss()`, clicking the backdrop, or pressing the `ESC` key).

The behavior should be consistent across all methods of dismissing the modal.

### Steps to Reproduce

1. Set up a project using the standalone API with `provideIonicAngular()`.
2. Attach a canDismiss callback function to a ion-modal.
3. Open the modal in large screen and attempt to dismiss it by click the backdrop:
4. Observe that canDismiss is triggered twice.
5. Use the `ESC` key: Observe that canDismiss is triggered only once (correct behavior).
6. Call the `dismiss()` function programmatically: Observe that canDismiss is triggered only once (correct behavior).

### Code Reproduction URL

https://stackblitz.com/edit/angular-2ftmlj?file=src%2Fapp%2Fexample.component.ts

### Ionic Info

Ionic:

Ionic CLI : 7.2.0

Utility:

cordova-res : not installed globally
native-run : not installed globally

System:

NodeJS : v22.5.1
npm : 10.8.2
OS : Windows 10

### Additional Information

_No response_

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。