search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.09k stars 13.51k forks source link

bug: Alert button handlers are executed outside the angular zone in certain cases #29071

Open Airdevelopments opened 8 months ago

Airdevelopments commented 8 months ago

Prerequisites

Ionic Framework Version

v7.x

Current Behavior

Button handlers of alerts seem to be executed outside the Angular Zone (at least in certain cases).

ionic_bug_1

Strangely enough, when the page is loaded with device emulation, the issue does not seem to appear:

ionic_bug_2

This is causing issues when calling angular related functions like trying to start navigation, since these must be called inside the angular zone.

Expected Behavior

We would always expect a button handler to run inside the Angular Zone.

Steps to Reproduce

  1. Clone provided reproduction repository
  2. npm run start
  3. Open browser dev tools
  4. Make sure device emulation is not enabled
  5. Click the button on Tab 1
  6. Click the button in the alert
  7. Watch the dev console output

Code Reproduction URL

https://github.com/Airdevelopments/ionic-alert-ngzone

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (C:\nvm\v18.16.0\node_modules\@ionic\cli) Ionic Framework : @ionic/angular 7.7.2 @angular-devkit/build-angular : 17.2.0 @angular-devkit/schematics : 17.2.0 @angular/cli : 17.2.0 @ionic/angular-toolkit : 9.0.0

Capacitor:

Capacitor CLI : 5.7.0 @capacitor/android : not installed @capacitor/core : 5.7.0 @capacitor/ios : not installed

Utility:

cordova-res : 0.15.4 native-run : 2.0.1

System:

NodeJS : v18.16.0 (C:\Program Files\nodejs\node.exe) npm : 9.8.0 OS : Windows 10

Additional Information

If you require any addtional information, please let me know.

emondora commented 8 months ago

Same problem here.

averyjohnston commented 8 months ago

Thank you for the issue. I'm able to replicate this, but I need to dig deeper into why it's happening.

averyjohnston commented 8 months ago

It looks like the issue is around how we've set up the callback to run in Angular Standalone, specifically. Normally we use a util that ensures the callbacks are run in the Angular zone, but that may not be getting used in a standalone app. I'll raise this with the team so we can take a closer look 👀