Skip to content

Commit 316141f

Browse files
authored
fix(select): indicating programmatic value change as user interaction in some cases (#19970)
We were using `ListKeyManager.setActiveItem` to change the active item when a value is assigned through a `FormControl`, in order to have it be highlighted if the user opens the panel. The problem is that `setActiveItem` emits a change event as if it's coming from the user, causing us to dispatch an event object with `isUserInput: true`. These changes use `updateActiveItem` instead which only updates the item, but doesn't emit any events. Fixes #19967.
1 parent 333e609 commit 316141f

File tree

2 files changed

+15
-2
lines changed

2 files changed

+15
-2
lines changed

src/material/select/select.spec.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1653,6 +1653,19 @@ describe('MatSelect', () => {
16531653
subscription!.unsubscribe();
16541654
}));
16551655

1656+
it('should not indicate programmatic value changes as user interactions', () => {
1657+
const events: MatOptionSelectionChange[] = [];
1658+
const subscription = fixture.componentInstance.select.optionSelectionChanges
1659+
.subscribe((event: MatOptionSelectionChange) => events.push(event));
1660+
1661+
fixture.componentInstance.control.setValue('eggs-5');
1662+
fixture.detectChanges();
1663+
1664+
expect(events.map(event => event.isUserInput)).toEqual([false]);
1665+
1666+
subscription.unsubscribe();
1667+
});
1668+
16561669
});
16571670

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

src/material/select/select.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -903,11 +903,11 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
903903
// Shift focus to the active item. Note that we shouldn't do this in multiple
904904
// mode, because we don't know what option the user interacted with last.
905905
if (correspondingOption) {
906-
this._keyManager.setActiveItem(correspondingOption);
906+
this._keyManager.updateActiveItem(correspondingOption);
907907
} else if (!this.panelOpen) {
908908
// Otherwise reset the highlighted option. Note that we only want to do this while
909909
// closed, because doing it while open can shift the user's focus unnecessarily.
910-
this._keyManager.setActiveItem(-1);
910+
this._keyManager.updateActiveItem(-1);
911911
}
912912
}
913913

0 commit comments

Comments
 (0)