Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
3 tasks done
5im0n opened this issue Nov 21, 2024 · 0 comments
Open
3 tasks done

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

5im0n opened this issue Nov 21, 2024 · 0 comments
Labels

Comments

@5im0n
Copy link
Contributor

5im0n commented Nov 21, 2024

Prerequisites

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 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.

bug.mp4

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

@ionitron-bot ionitron-bot bot added the triage label Nov 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant