ionic-team / ionic-team/ionic-framework

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

Aperta
#30,028 1 commento 0 reazioni 0 assegnatari Vedi su GitHub
triage
Lingua principale
TypeScript
Stelle
52.7k
Fork
13.3k
Merge medio
1g 15h
PR unite (30g)
51

Descrizione

### 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_

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.