Skip to content
Permalink
Browse files

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

fixes #19204
  • Loading branch information...
manucorporat committed Aug 29, 2019
1 parent 6eca5b0 commit 9751f145e1d23ebcbbde6fb15e94155d90486fe4
@@ -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();
@@ -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/common": "~8.2.0",
"@angular/compiler": "~8.2.0",
"@angular/core": "~8.2.0",
"@angular/forms": "~8.2.0",
"@angular/platform-browser": "~8.2.0",
"@angular/platform-browser-dynamic": "~8.2.0",
"@angular/platform-server": "~8.2.0",
"@angular/router": "~8.2.0",
"@angular/animations": "^8.2.3",
"@angular/common": "^8.2.3",
"@angular/compiler": "^8.2.3",
"@angular/core": "^8.2.3",
"@angular/forms": "^8.2.3",
"@angular/platform-browser": "^8.2.3",
"@angular/platform-browser-dynamic": "^8.2.3",
"@angular/platform-server": "^8.2.3",
"@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/cli": "~8.2.0",
"@angular/compiler-cli": "~8.2.0",
"@angular/language-service": "~8.2.0",
"@angular-devkit/build-angular": "^0.802.2",
"@angular/cli": "^8.2.2",
"@angular/compiler-cli": "^8.2.3",
"@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"
}
}
@@ -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>
@@ -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';
}
}
@@ -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>
@@ -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';
}
}
@@ -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();
this.ionChange.emit({ value });
if (this.didInit) {
this.updateButtons();
this.ionChange.emit({ value });
}
}

/**
@@ -63,18 +67,19 @@ export class Segment implements ComponentInterface {
this.value = selectedButton.value;
}

componentWillLoad() {
this.emitStyle();
}

componentDidLoad() {
if (this.value == null) {
connectedCallback() {
if (this.value === undefined) {
const checked = this.getButtons().find(b => b.checked);
if (checked) {
this.value = checked.value;
}
}
this.emitStyle();
}

componentDidLoad() {
this.updateButtons();
this.didInit = true;
}

private emitStyle() {

0 comments on commit 9751f14

Please sign in to comment.
You can’t perform that action at this time.