fix: modal beforeClosed and afterClosed consistency between platforms (#87)

Author: edusperoni

packages/angular/src/lib/cdk/dialog/dialog-ref.ts

@@ -61,13 +61,14 @@ export class NativeDialogRef<T, R = any> {
       .subscribe(() => {
         clearTimeout(this._closeFallbackTimeout);
         this._finishDialogClose();
+        this._afterClosed.next(this._result);
+        this._afterClosed.complete();
       });
 
     _nativeModalRef.onDismiss.subscribe(() => {
       this._beforeClosed.next(this._result);
       this._beforeClosed.complete();
-      this._afterClosed.next(this._result);
-      this._afterClosed.complete();
+
       this.componentInstance = null!;
       _nativeModalRef.dispose();
     });
@@ -98,7 +99,11 @@ export class NativeDialogRef<T, R = any> {
         // amount of time plus 100ms. We don't need to run this outside the NgZone, because for the
         // vast majority of cases the timeout will have been cleared before it has the chance to fire.
         this._closeFallbackTimeout = setTimeout(
-          () => this._finishDialogClose(),
+          () => {
+            this._finishDialogClose();
+            this._afterClosed.next(this._result);
+            this._afterClosed.complete();
+          },
           //event.totalTime + 100);
           100
         );

packages/angular/src/lib/cdk/dialog/native-modal-ref.ts

@@ -22,6 +22,7 @@ export class NativeModalRef {
   modalViewRef: NgViewRef<any>;
 
   private _closeCallback: () => void;
+  private _isDismissed = false;
 
   constructor(private _config: NativeDialogConfig, private _injector: Injector, @Optional() private location?: NSLocationStrategy) {
     let parentView = this._config.viewContainerRef?.element.nativeElement || Application.getRootView();
@@ -38,10 +39,12 @@ export class NativeModalRef {
     }
     this.parentView = parentView;
 
-    this._closeCallback = once(() => {
+    this._closeCallback = once(async () => {
       this.stateChanged.next({ state: 'closing' });
-      this.modalViewRef.firstNativeLikeView?.closeModal();
-      this.location?._closeModalNavigation();
+      if (!this._isDismissed) {
+        this.modalViewRef.firstNativeLikeView?.closeModal();
+      }
+      await this.location?._closeModalNavigation();
       // this.detachedLoaderRef?.destroy();
       if (this.modalViewRef?.firstNativeLikeView.isLoaded) {
         fromEvent(this.modalViewRef.firstNativeLikeView, 'unloaded')
@@ -81,8 +84,8 @@ export class NativeModalRef {
     this.parentView.showModal(this.modalViewRef.firstNativeLikeView, {
       context: null,
       ...userOptions,
-      closeCallback: () => {
-        this.location?._closeModalNavigation();
+      closeCallback: async () => {
+        await this.location?._closeModalNavigation();
         this.onDismiss.next();
         this.onDismiss.complete();
       },
@@ -113,8 +116,9 @@ export class NativeModalRef {
     this.parentView.showModal(this.modalViewRef.firstNativeLikeView, {
       context: null,
       ...userOptions,
-      closeCallback: () => {
-        this.location?._closeModalNavigation();
+      closeCallback: async () => {
+        this._isDismissed = true;
+        this._closeCallback(); // close callback can only be called once, so we call it here to setup the exit events
         this.onDismiss.next();
         this.onDismiss.complete();
       },

packages/angular/src/lib/legacy/directives/dialogs.ts

@@ -123,15 +123,15 @@ export class ModalDialogService {
     let detachedLoaderRef: ComponentRef<DetachedLoader>;
     let portalOutlet: NativeScriptDomPortalOutlet;
 
-    const closeCallback = once((...args) => {
+    const closeCallback = once(async (...args) => {
       options.doneCallback.apply(undefined, args);
       if (componentViewRef) {
         componentViewRef.firstNativeLikeView.closeModal();
         const params = this.openedModalParams.pop();
         if (this._closed$) {
           this._closed$.next(params);
         }
-        this.location._closeModalNavigation();
+        await this.location._closeModalNavigation();
         if (detachedLoaderRef || portalOutlet) {
           this.zone.run(() => {
             portalOutlet?.dispose();

packages/angular/src/lib/legacy/router/ns-location-strategy.ts

@@ -354,6 +354,8 @@ export class NSLocationStrategy extends LocationStrategy {
       this.currentOutlet = outlet;
       this.currentOutlet.showingModal = false;
       this.callPopState(this.currentOutlet.peekState(), false);
+      // this is needed because angular does a setTimeout on onPopState, so if we don't do this we might end up with inconsistent state
+      return new Promise((resolve) => setTimeout(resolve, 0));
     }
   }