fix(segment): don't emit ionChange until didLoad (#19218)

fixes #19204

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

@@ -17,6 +17,15 @@ describe('tabs', () => {
       await testState(1, 'account');
     });
 
+    it('should navigate between tabs and ionChange events should be dispatched ', async () => {
+      let tab = await testTabTitle('Tab 1 - Page 1');
+      expect(await tab.$('.segment-changed').getText()).toEqual('false');
+
+      await element(by.css('#tab-button-contact')).click();
+      tab = await testTabTitle('Tab 2 - Page 1');
+      expect(await tab.$('.segment-changed').getText()).toEqual('false');
+    });
+
     it('should simulate stack + double tab click', async () => {
       let tab = await getSelectedTab() as ElementFinder;
       await tab.$('#goto-tab1-page2').click();

angular/test/test-app/package.json

@@ -18,15 +18,15 @@
     "build:client-and-server-bundles": "npm run build && ng run test-app:server:production --bundleDependencies all"
   },
   "dependencies": {
-    "@angular/animations": "~8.2.0",
+    "@angular/animations": "^8.2.3",
-    "@angular/common": "~8.2.0",
+    "@angular/common": "^8.2.3",
-    "@angular/compiler": "~8.2.0",
+    "@angular/compiler": "^8.2.3",
-    "@angular/core": "~8.2.0",
+    "@angular/core": "^8.2.3",
-    "@angular/forms": "~8.2.0",
+    "@angular/forms": "^8.2.3",
-    "@angular/platform-browser": "~8.2.0",
+    "@angular/platform-browser": "^8.2.3",
-    "@angular/platform-browser-dynamic": "~8.2.0",
+    "@angular/platform-browser-dynamic": "^8.2.3",
-    "@angular/platform-server": "~8.2.0",
+    "@angular/platform-server": "^8.2.3",
-    "@angular/router": "~8.2.0",
+    "@angular/router": "^8.2.3",
     "@ionic/angular": "^4.7.0",
     "@ionic/angular-server": "^0.0.2",
     "@nguniversal/express-engine": "~8.1.1",
@@ -35,13 +35,13 @@
     "express": "^4.15.2",
     "rxjs": "~6.5.2",
     "tslib": "^1.9.0",
-    "zone.js": "~0.10.0"
+    "zone.js": "^0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.802.0",
+    "@angular-devkit/build-angular": "^0.802.2",
-    "@angular/cli": "~8.2.0",
+    "@angular/cli": "^8.2.2",
-    "@angular/compiler-cli": "~8.2.0",
+    "@angular/compiler-cli": "^8.2.3",
-    "@angular/language-service": "~8.2.0",
+    "@angular/language-service": "^8.2.3",
     "@types/jasmine": "~3.3.16",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~12.6.8",
@@ -58,6 +58,6 @@
     "ts-node": "~8.3.0",
     "tslint": "~5.18.0",
     "typescript": "~3.5.3",
-    "webpack-cli": "^3.1.0"
+    "webpack-cli": "^3.3.7"
   }
 }

angular/test/test-app/src/app/tabs-tab1/tabs-tab1.component.html

@@ -4,8 +4,15 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   <h1>Welcome to Tab1</h1>
+  <ion-segment [(ngModel)]="segment" (ionChange)="segmentChanged($event)">
+    <ion-segment-button value="one">One</ion-segment-button>
+    <ion-segment-button value="two">Two</ion-segment-button>
+  </ion-segment>
+  <p>
+    Segment changed: <span class="segment-changed">{{changed}}</span>
+  </p>
   <p>
     <ion-button routerLink="/tabs/account/nested/1" id="goto-tab1-page2">Go to Page 2</ion-button>
     <ion-button routerLink="/tabs/lazy/nested" id="goto-tab3-page2">Go to Tab 3 - Page 2</ion-button>

angular/test/test-app/src/app/tabs-tab1/tabs-tab1.component.ts

@@ -6,6 +6,8 @@ import { Component, NgZone } from '@angular/core';
 })
 export class TabsTab1Component {
   title = 'ERROR';
+  segment = 'one';
+  changed = 'false';
 
   ionViewWillEnter() {
     NgZone.assertInAngularZone();
@@ -14,4 +16,9 @@ export class TabsTab1Component {
       this.title = 'Tab 1 - Page 1';
     });
   }
+
+  segmentChanged(ev: any) {
+    console.log('Segment changed', ev);
+    this.changed = 'true';
+  }
 }

angular/test/test-app/src/app/tabs-tab2/tabs-tab2.component.html

@@ -4,8 +4,15 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   <h1>Welcome to Tab 2</h1>
+  <ion-segment [(ngModel)]="segment" (ionChange)="segmentChanged($event)">
+    <ion-segment-button value="one">One</ion-segment-button>
+    <ion-segment-button value="two">Two</ion-segment-button>
+  </ion-segment>
+  <p>
+    Segment changed: <span class="segment-changed">{{changed}}</span>
+  </p>
   <p>
     <ion-button routerLink="/tabs/account" id="goto-tab1-page1">Go to Tab 1 - Page 1</ion-button>
     <ion-button routerLink="/tabs/account/nested/1" id="goto-tab1-page2">Go to Tab 1 - Page 2</ion-button>

angular/test/test-app/src/app/tabs-tab2/tabs-tab2.component.ts

@@ -6,6 +6,8 @@ import { Component, NgZone } from '@angular/core';
 })
 export class TabsTab2Component {
   title = 'ERROR';
+  segment = 'two';
+  changed = 'false';
 
   ngOnInit() {
     NgZone.assertInAngularZone();
@@ -14,4 +16,9 @@ export class TabsTab2Component {
       this.title = 'Tab 2 - Page 1';
     });
   }
+
+  segmentChanged(ev: any) {
+    console.log('Segment changed', ev);
+    this.changed = 'true';
+  }
 }

core/src/components/segment/segment.tsx

@@ -17,6 +17,8 @@ import { createColorClasses } from '../../utils/theme';
 })
 export class Segment implements ComponentInterface {
 
+  private didInit = false;
+
   @Element() el!: HTMLElement;
 
   /**
@@ -43,8 +45,10 @@ export class Segment implements ComponentInterface {
 
   @Watch('value')
   protected valueChanged(value: string | undefined) {
-    this.updateButtons();
+    if (this.didInit) {
-    this.ionChange.emit({ value });
+      this.updateButtons();
+      this.ionChange.emit({ value });
+    }
   }
 
   /**
@@ -63,18 +67,19 @@ export class Segment implements ComponentInterface {
     this.value = selectedButton.value;
   }
 
-  componentWillLoad() {
+  connectedCallback() {
-    this.emitStyle();
+    if (this.value === undefined) {
-  }
-
-  componentDidLoad() {
-    if (this.value == null) {
       const checked = this.getButtons().find(b => b.checked);
       if (checked) {
         this.value = checked.value;
       }
     }
+    this.emitStyle();
+  }
+
+  componentDidLoad() {
     this.updateButtons();
+    this.didInit = true;
   }
 
   private emitStyle() {