From d5efa113317eaf874712134dc9b8e4502aa4760f Mon Sep 17 00:00:00 2001
From: Amanda Smith <90629384+amandaesmith3@users.noreply.github.com>
Date: Wed, 9 Mar 2022 14:34:51 -0600
Subject: [PATCH] fix(tabs): angular, fire willChange event before selected tab
 changes (#24910)

Co-authored-by: Sean Perkins <sean@ionic.io>
---
 angular/src/directives/navigation/ion-tabs.ts |  2 +-
 angular/test/test-app/e2e/src/tabs.spec.ts    | 24 +++++++++++++++
 .../test-app/src/app/tabs/tabs.component.css  |  5 ++++
 .../test-app/src/app/tabs/tabs.component.html | 28 +++++++++++++++--
 .../test-app/src/app/tabs/tabs.component.ts   | 30 +++++++++++++++----
 5 files changed, 80 insertions(+), 9 deletions(-)
 create mode 100644 angular/test/test-app/src/app/tabs/tabs.component.css

diff --git a/angular/src/directives/navigation/ion-tabs.ts b/angular/src/directives/navigation/ion-tabs.ts
index a18114a3e2..33a163eefb 100644
--- a/angular/src/directives/navigation/ion-tabs.ts
+++ b/angular/src/directives/navigation/ion-tabs.ts
@@ -57,10 +57,10 @@ export class IonTabs {
   onPageSelected(detail: StackEvent): void {
     const stackId = detail.enteringView.stackId;
     if (detail.tabSwitch && stackId !== undefined) {
+      this.ionTabsWillChange.emit({ tab: stackId });
       if (this.tabBar) {
         this.tabBar.selectedTab = stackId;
       }
-      this.ionTabsWillChange.emit({ tab: stackId });
       this.ionTabsDidChange.emit({ tab: stackId });
     }
   }
diff --git a/angular/test/test-app/e2e/src/tabs.spec.ts b/angular/test/test-app/e2e/src/tabs.spec.ts
index 186e813ece..c2bf709b9d 100644
--- a/angular/test/test-app/e2e/src/tabs.spec.ts
+++ b/angular/test/test-app/e2e/src/tabs.spec.ts
@@ -19,6 +19,30 @@ describe('Tabs', () => {
       tab.find('.segment-changed').should('have.text', 'false');
     });
 
+    describe('when navigating between tabs', () => {
+
+      it('should emit ionTabsWillChange before setting the selected tab', () => {
+        cy.get('#ionTabsWillChangeCounter').should('have.text', '1');
+        cy.get('#ionTabsWillChangeEvent').should('have.text', 'account');
+        cy.get('#ionTabsWillChangeSelectedTab').should('have.text', '');
+
+        cy.get('#ionTabsDidChangeCounter').should('have.text', '1');
+        cy.get('#ionTabsDidChangeEvent').should('have.text', 'account');
+        cy.get('#ionTabsDidChangeSelectedTab').should('have.text', 'account');
+
+        cy.get('#tab-button-contact').click();
+
+        cy.get('#ionTabsWillChangeCounter').should('have.text', '2');
+        cy.get('#ionTabsWillChangeEvent').should('have.text', 'contact');
+        cy.get('#ionTabsWillChangeSelectedTab').should('have.text', 'account');
+
+        cy.get('#ionTabsDidChangeCounter').should('have.text', '2');
+        cy.get('#ionTabsDidChangeEvent').should('have.text', 'contact');
+        cy.get('#ionTabsDidChangeSelectedTab').should('have.text', 'contact');
+      })
+
+    });
+
     it('should simulate stack + double tab click', () => {
       let tab = getSelectedTab();
       tab.find('#goto-tab1-page2').click();
diff --git a/angular/test/test-app/src/app/tabs/tabs.component.css b/angular/test/test-app/src/app/tabs/tabs.component.css
new file mode 100644
index 0000000000..f6f95679b8
--- /dev/null
+++ b/angular/test/test-app/src/app/tabs/tabs.component.css
@@ -0,0 +1,5 @@
+#test {
+  position: absolute;
+  bottom: 100px;
+  left: 0;
+}
diff --git a/angular/test/test-app/src/app/tabs/tabs.component.html b/angular/test/test-app/src/app/tabs/tabs.component.html
index 4bb9e22762..0114266c10 100644
--- a/angular/test/test-app/src/app/tabs/tabs.component.html
+++ b/angular/test/test-app/src/app/tabs/tabs.component.html
@@ -1,4 +1,4 @@
-<ion-tabs (ionTabsDidChange)="tabChanged($event)">
+<ion-tabs (ionTabsDidChange)="tabChanged($event)" (ionTabsWillChange)="tabsWillChange($event)">
   <ion-tab-bar>
     <ion-tab-button tab="account">
       <ion-label>Tab One</ion-label>
@@ -18,5 +18,29 @@
   </ion-tab-bar>
 </ion-tabs>
 <ion-fab horizontal="end" vertical="top">
-  <ion-fab-button id="tabs-state" style="width: 100px;">{{tabCounter}}.{{tabEvent}}</ion-fab-button>
+  <ion-fab-button id="tabs-state" style="width: 100px;">{{tabsDidChangeCounter}}.{{tabsDidChangeEvent}}</ion-fab-button>
 </ion-fab>
+<div id="test">
+  <ul>
+    <li>
+      ionTabsWillChange counter: <span id="ionTabsWillChangeCounter">{{ tabsWillChangeCounter }}</span>
+    </li>
+    <li>
+      ionTabsWillChange event: <span id="ionTabsWillChangeEvent">{{ tabsWillChangeEvent }}</span>
+    </li>
+    <li>
+      ionTabsWillChange selectedTab: <span id="ionTabsWillChangeSelectedTab">{{ tabsWillChangeSelectedTab }}</span>
+    </li>
+  </ul>
+  <ul>
+    <li>
+      ionTabsDidChange counter: <span id="ionTabsDidChangeCounter">{{ tabsDidChangeCounter }}</span>
+    </li>
+    <li>
+      ionTabsDidChange event: <span id="ionTabsDidChangeEvent">{{ tabsDidChangeEvent }}</span>
+    </li>
+    <li>
+      ionTabsDidChange selectedTab: <span id="ionTabsDidChangeSelectedTab">{{ tabsDidChangeSelectedTab }}</span>
+    </li>
+  </ul>
+</div>
diff --git a/angular/test/test-app/src/app/tabs/tabs.component.ts b/angular/test/test-app/src/app/tabs/tabs.component.ts
index 9f6f26d2af..58c2ba3ac7 100644
--- a/angular/test/test-app/src/app/tabs/tabs.component.ts
+++ b/angular/test/test-app/src/app/tabs/tabs.component.ts
@@ -1,15 +1,33 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { IonTabBar } from '@ionic/angular';
 
 @Component({
   selector: 'app-tabs',
   templateUrl: './tabs.component.html',
+  styleUrls: ['./tabs.component.css']
 })
 export class TabsComponent {
-  tabCounter = 0;
-  tabEvent = '';
+  tabsDidChangeCounter = 0;
+  tabsDidChangeEvent = '';
+  tabsDidChangeSelectedTab = '';
 
-  tabChanged(ev: {tab: string}) {
-    this.tabCounter++;
-    this.tabEvent = ev.tab;
+  tabsWillChangeCounter = 0;
+  tabsWillChangeEvent = '';
+  tabsWillChangeSelectedTab = '';
+
+  @ViewChild(IonTabBar) tabBar: IonTabBar;
+
+  tabChanged(ev: { tab: string }) {
+    console.log('ionTabsDidChange', this.tabBar.selectedTab);
+    this.tabsDidChangeCounter++;
+    this.tabsDidChangeEvent = ev.tab;
+    this.tabsDidChangeSelectedTab = this.tabBar.selectedTab;
+  }
+
+  tabsWillChange(ev: { tab: string }) {
+    console.log('ionTabsWillChange', this.tabBar.selectedTab);
+    this.tabsWillChangeCounter++;
+    this.tabsWillChangeEvent = ev.tab;
+    this.tabsWillChangeSelectedTab = this.tabBar.selectedTab;
   }
 }