javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(select): ionChange will only emit from user committed changes (#26066)

Browse Source 
BREAKING CHANGE:

`ionChange` is no longer emitted when the `value` of `ion-select` is modified externally. `ionChange` is only emitted from user committed changes, such as confirming a selected option in the select's overlay.
This commit is contained in:
Liam DeBeasi
2022-10-10 08:36:51 -05:00
committed by GitHub
parent b052d3b262
commit 34c4137868
12 changed files with 153 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
angular/test/apps/ng12/src/app/modal-example/modal-example.component.ts
View File

@@ -36,6 +36,10 @@ export class ModalExampleComponent implements OnInit, ViewWillLeave, ViewDidEnte
this.onInit++;
}
setSelect(value: null | undefined) {
this.form.get('select').setValue(value);
}
ionViewWillEnter() {
if (this.onInit !== 1) {
throw new Error('ngOnInit was not called');

4
angular/test/apps/ng13/src/app/modal-example/modal-example.component.ts
View File

@@ -36,6 +36,10 @@ export class ModalExampleComponent implements OnInit, ViewWillLeave, ViewDidEnte
this.onInit++;
}
setSelect(value: null | undefined) {
this.form.get('select').setValue(value);
}
ionViewWillEnter() {
if (this.onInit !== 1) {
throw new Error('ngOnInit was not called');

8
angular/test/base/e2e/src/form.spec.ts
View File

@@ -44,7 +44,13 @@ describe('Form', () => {
// TODO: FW-1160 - Remove when v7 is released
cy.wait(300);
cy.get('ion-select').invoke('prop', 'value', 'nes');
cy.get('ion-select').click();
cy.get('ion-alert').should('exist').should('be.visible');
// NES option
cy.get('ion-alert .alert-radio-button:nth-of-type(2)').click();
// Click confirm button
cy.get('ion-alert .alert-button:not(.alert-button-role-cancel)').click();
testStatus('INVALID');
cy.get('ion-range').invoke('prop', 'value', 40);

11
angular/test/base/e2e/src/inputs.spec.ts
View File

@@ -45,14 +45,21 @@ describe('Inputs', () => {
cy.get('ion-input input').eq(0).blur();
cy.get('ion-datetime').invoke('prop', 'value', '1996-03-15');
cy.get('ion-select').invoke('prop', 'value', 'playstation');
cy.get('ion-select#game-console').click();
cy.get('ion-alert').should('exist').should('be.visible');
// Playstation option
cy.get('ion-alert .alert-radio-button:nth-of-type(4)').click();
// Click confirm button
cy.get('ion-alert .alert-button:not(.alert-button-role-cancel)').click();
cy.get('ion-range').invoke('prop', 'value', 20);
cy.get('#checkbox-note').should('have.text', 'true');
cy.get('#toggle-note').should('have.text', 'true');
cy.get('#input-note').should('have.text', 'hola');
cy.get('#datetime-note').should('have.text', '1996-03-15');
cy.get('#select-note').should('have.text', 'playstation');
cy.get('#select-note').should('have.text', 'ps');
cy.get('#range-note').should('have.text', '20');
});

13
angular/test/base/e2e/src/modal.spec.ts
View File

@@ -102,18 +102,23 @@ describe('when in a modal', () => {
});
it('should render ion-item item-has-value class when control value is set', () => {
cy.get('[formControlName="select"]').invoke('attr', 'value', 0);
cy.get('ion-select').click();
cy.get('ion-alert').should('exist').should('be.visible');
// Option 0 option
cy.get('ion-alert .alert-radio-button:nth-of-type(1)').click();
// Click confirm button
cy.get('ion-alert .alert-button:not(.alert-button-role-cancel)').click();
cy.get('#inputWithFloatingLabel').should('have.class', 'item-has-value');
});
it('should not render ion-item item-has-value class when control value is undefined', () => {
cy.get('[formControlName="select"]').invoke('attr', 'value', undefined);
cy.get('#set-to-undefined').click();
cy.get('#inputWithFloatingLabel').should('not.have.class', 'item-has-value');
});
it('should not render ion-item item-has-value class when control value is null', () => {
cy.get('[formControlName="select"]').invoke('attr', 'value', null);
cy.get('#set-to-null').click();
cy.get('#inputWithFloatingLabel').should('not.have.class', 'item-has-value');
});
});

2
angular/test/base/src/app/inputs/inputs.component.html
View File

@@ -23,7 +23,7 @@
<ion-item>
<ion-label>Select</ion-label>
<ion-select [(ngModel)]="select">
<ion-select [(ngModel)]="select" id="game-console">
<ion-select-option value="">No Game Console</ion-select-option>
<ion-select-option value="nes">NES</ion-select-option>
<ion-select-option value="n64" selected>Nintendo64</ion-select-option>

3
angular/test/base/src/app/modal-example/modal-example.component.html
View File

@@ -31,5 +31,8 @@
<ion-select-option [value]="1">Option 1</ion-select-option>
</ion-select>
</ion-item>
<ion-button id="set-to-null" (click)="setSelect(null)">Set select value to "null"></ion-button>
<ion-button id="set-to-undefined" (click)="setSelect(undefined)">Set select value to "undefined"></ion-button>
</form>
</ion-content>

4
angular/test/base/src/app/modal-example/modal-example.component.ts
View File

@@ -36,6 +36,10 @@ export class ModalExampleComponent implements OnInit, ViewWillLeave, ViewDidEnte
this.onInit++;
}
setSelect(value: null | undefined) {
this.form.get('select').setValue(value);
}
ionViewWillEnter() {
if (this.onInit !== 1) {
throw new Error('ngOnInit was not called');