Skip to content

Commit f6cd86e

Browse files
crisbetojelbourn
authored andcommitted
fix(select): optionSelectionChanges not emitting when the list of options changes (#14814)
Along the same lines as #14813. Fixes `MatSelect.optionSelectionChanges` not emitting if the list options changes.
1 parent e630bd6 commit f6cd86e

File tree

2 files changed

+37
-2
lines changed

2 files changed

+37
-2
lines changed

src/material/select/select.spec.ts

+30
Original file line numberDiff line numberDiff line change
@@ -1552,6 +1552,36 @@ describe('MatSelect', () => {
15521552
subscription!.unsubscribe();
15531553
}));
15541554

1555+
it('should emit to `optionSelectionChanges` after the list of options has changed',
1556+
fakeAsync(() => {
1557+
let spy = jasmine.createSpy('option selection spy');
1558+
let subscription = fixture.componentInstance.select.optionSelectionChanges.subscribe(spy);
1559+
let selectFirstOption = () => {
1560+
trigger.click();
1561+
fixture.detectChanges();
1562+
flush();
1563+
1564+
const option = overlayContainerElement.querySelector('mat-option') as HTMLElement;
1565+
option.click();
1566+
fixture.detectChanges();
1567+
flush();
1568+
};
1569+
1570+
fixture.componentInstance.foods = [{value: 'salad-8', viewValue: 'Salad'}];
1571+
fixture.detectChanges();
1572+
selectFirstOption();
1573+
1574+
expect(spy).toHaveBeenCalledTimes(1);
1575+
1576+
fixture.componentInstance.foods = [{value: 'fruit-9', viewValue: 'Fruit'}];
1577+
fixture.detectChanges();
1578+
selectFirstOption();
1579+
1580+
expect(spy).toHaveBeenCalledTimes(2);
1581+
1582+
subscription!.unsubscribe();
1583+
}));
1584+
15551585
});
15561586

15571587
describe('forms integration', () => {

src/material/select/select.ts

+7-2
Original file line numberDiff line numberDiff line change
@@ -443,8 +443,13 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
443443

444444
/** Combined stream of all of the child options' change events. */
445445
readonly optionSelectionChanges: Observable<MatOptionSelectionChange> = defer(() => {
446-
if (this.options) {
447-
return merge(...this.options.map(option => option.onSelectionChange));
446+
const options = this.options;
447+
448+
if (options) {
449+
return options.changes.pipe(
450+
startWith(options),
451+
switchMap(() => merge(...options.map(option => option.onSelectionChange)))
452+
);
448453
}
449454

450455
return this._ngZone.onStable

0 commit comments

Comments
 (0)