fix(router): fix partial gesture (#18977)

fixes #18462

angular/src/directives/navigation/stack-controller.ts

@@ -108,6 +108,14 @@ export class StackController {
     // Wait until previous transitions finish
     return this.zone.runOutsideAngular(() => {
       return this.wait(() => {
+        // disconnect leaving page from change detection to
+        // reduce jank during the page transition
+        if (leavingView) {
+          leavingView.ref.changeDetectorRef.detach();
+        }
+        // In case the enteringView is the same as the leavingPage we need to reattach()
+        enteringView.ref.changeDetectorRef.reattach();
+
         return this.transition(enteringView, leavingView, animation, this.canGoBack(1), false)
           .then(() => cleanupAsync(enteringView, views, viewsSnapshot, this.location))
           .then(() => ({
@@ -161,7 +169,7 @@ export class StackController {
           enteringView, // entering view
           leavingView, // leaving view
           'back',
-          true,
+          this.canGoBack(2),
           true
         );
       });
@@ -173,6 +181,8 @@ export class StackController {
     if (shouldComplete) {
       this.skipTransition = true;
       this.pop(1);
+    } else if (this.activeView) {
+      cleanup(this.activeView, this.views, this.views, this.location);
     }
   }
 
@@ -216,16 +226,6 @@ export class StackController {
     if (leavingView === enteringView) {
       return Promise.resolve(false);
     }
-
-    // disconnect leaving page from change detection to
-    // reduce jank during the page transition
-    if (leavingView) {
-      leavingView.ref.changeDetectorRef.detach();
-    }
-    // In case the enteringView is the same as the leavingPage we need to reattach()
-    if (enteringView) {
-      enteringView.ref.changeDetectorRef.reattach();
-    }
     const enteringEl = enteringView ? enteringView.element : undefined;
     const leavingEl = leavingView ? leavingView.element : undefined;
     const containerEl = this.containerEl;

angular/test/test-app/e2e/src/navigation.e2e-spec.ts

@@ -7,6 +7,40 @@ describe('navigation', () => {
     return handleErrorMessages();
   });
 
+  it ('should swipe and abort', async () => {
+    await browser.get('/router-link?ionic:mode=ios');
+    await waitTime(500);
+    await element(by.css('#routerLink')).click();
+    await waitTime(500);
+    await swipeLeft(5);
+    await waitTime(500);
+
+    const pageHidden = element(by.css('app-router-link'));
+    expect(await pageHidden.getAttribute('aria-hidden')).toEqual('true');
+    expect(await pageHidden.getAttribute('class')).toEqual('ion-page ion-page-hidden');
+
+    const pageVisible = element(by.css('app-router-link-page'));
+    expect(await pageVisible.getAttribute('aria-hidden')).toEqual(null);
+    expect(await pageVisible.getAttribute('class')).toEqual('ion-page can-go-back');
+  });
+
+  it ('should swipe and go back', async () => {
+    await browser.get('/router-link?ionic:mode=ios');
+    await waitTime(500);
+    await element(by.css('#routerLink')).click();
+    await waitTime(500);
+    await testStack('ion-router-outlet', ['app-router-link', 'app-router-link-page']);
+
+    await swipeLeft(300);
+
+    await waitTime(1000);
+    await testStack('ion-router-outlet', ['app-router-link']);
+
+    const page = element(by.css('app-router-link'));
+    expect(await page.getAttribute('aria-hidden')).toEqual(null);
+    expect(await page.getAttribute('class')).toEqual('ion-page');
+  })
+
   it('should navigate correctly', async () => {
     await browser.get('/navigation/page1');
     await waitTime(2000);
@@ -22,3 +56,17 @@ describe('navigation', () => {
   });
 
 });
+
+function swipeLeft(end: number) {
+  return browser.driver.touchActions()
+    .tapAndHold({x: 5, y: 1})
+    .move({x: 6, y: 1})
+    .move({x: 7, y: 1})
+    .move({x: 8, y: 1})
+    .move({x: 30, y: 1})
+    .move({x: 300, y: 1})
+    .move({x: end, y: 1})
+    .move({x: end, y: 1})
+    .release({x: end, y: 1})
+    .perform();
+}