fix(select): unable to toggle multi select option after using the mouse (#11061)

Author: crisbeto

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', () => {

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);