diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts index cce69647396b..c7de42141bf1 100644 --- a/src/lib/select/select.spec.ts +++ b/src/lib/select/select.spec.ts @@ -702,6 +702,29 @@ describe('MatSelect', () => { expect(host.getAttribute('aria-activedescendant')).toBe(options[0].id); })); + it('should restore focus to the trigger after selecting an option in multi-select mode', + fakeAsync(() => { + fixture.destroy(); + + const multiFixture = TestBed.createComponent(MultiSelect); + const instance = multiFixture.componentInstance; + + multiFixture.detectChanges(); + select = multiFixture.debugElement.query(By.css('mat-select')).nativeElement; + instance.select.open(); + multiFixture.detectChanges(); + + // Ensure that the select isn't focused to begin with. + select.blur(); + expect(document.activeElement).not.toBe(select, 'Expected trigger not to be focused.'); + + const option = overlayContainerElement.querySelector('mat-option')! as HTMLElement; + option.click(); + multiFixture.detectChanges(); + + expect(document.activeElement).toBe(select, 'Expected trigger to be focused.'); + })); + }); describe('for options', () => { diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index 2396991650e6..a37141ebfd2e 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -826,7 +826,7 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit, .withVerticalOrientation() .withHorizontalOrientation(this._isRtl() ? 'rtl' : 'ltr'); - this._keyManager.tabOut.pipe(takeUntil(this._destroy)).subscribe(() => this.close()); + this._keyManager.tabOut.pipe(takeUntil(this._destroy)).subscribe(() => this.close()); this._keyManager.change.pipe(takeUntil(this._destroy)).subscribe(() => { if (this._panelOpen && this.panel) { this._scrollActiveOptionIntoView(); @@ -874,6 +874,12 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit, wasSelected ? option.deselect() : option.select(); this._keyManager.setActiveItem(option); this._sortValues(); + + // In case the user select the option with their mouse, we + // want to restore focus back to the trigger, in order to + // prevent the select keyboard controls from clashing with + // the ones from `mat-option`. + this.focus(); } else { this._clearSelection(option.value == null ? undefined : option);