components
components copied to clipboard
fix(select): value update not being propagated when selected option is removed or added
Fixes the select not propagating its value back up to the value accessor if a selected option is added or removed. Previously this only happened the next time the user interacted with an option.
Fixes #9038.
@crisbeto it looks like this has the side-effect of causing the select to emit a selectionChange
event for its initial value, which it didn't do before
(was caught by an internal test)
@jelbourn do you have any more info on the test? I wasn't able to reproduce it in a test or in the demo app in a few scenarios (single selection, multiple selection and without Angular forms). Here's what my test looks like:
it('should not emit the `selectionChange` event for the preselected value', fakeAsync(() => {
const fixture = TestBed.createComponent(BasicSelectWithoutFormsPreselected);
fixture.detectChanges();
flush();
expect(fixture.componentInstance.selectionChangeSpy).not.toHaveBeenCalled();
}));
@Component({
template: `
<mat-form-field>
<mat-select placeholder="Food" [(value)]="selectedFood"
(selectionChange)="selectionChangeSpy()">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{ food.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
`
})
class BasicSelectWithoutFormsPreselected {
selectedFood = 'pizza-1';
selectionChangeSpy = jasmine.createSpy('selectionChange spy');
foods: any[] = [
{ value: 'steak-0', viewValue: 'Steak' },
{ value: 'pizza-1', viewValue: 'Pizza' },
];
@ViewChild(MatSelect) select: MatSelect;
}
In the test that was failing for this, it was a select inside of mat-paginator
. The thing under test is listening to page
events from the paginator, the first thing the test does is to set the paginator.pageSize = 1
, then they manually emit page
(for some reason), and then expect that only one event was handled, but two occur. The extra event seems to come from the select emitting something that it wasn't before.
Any news on this?
any updates here?