From a3dba7690c4f17bba523b6ae6d3c37ee173b3046 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 29 Jun 2018 18:37:31 +0200 Subject: [PATCH] fix(select): not resuming keyboard selection after clicking on single-select option (#11882) --- src/lib/select/select.spec.ts | 22 ++++++++++++++++++++++ src/lib/select/select.ts | 6 ++++-- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts index a2df8f8545f1..be4159cd5c84 100644 --- a/src/lib/select/select.spec.ts +++ b/src/lib/select/select.spec.ts @@ -282,6 +282,28 @@ describe('MatSelect', () => { 'Expected value from second option to have been set on the model.'); })); + it('should resume focus from selected item after selecting via click', fakeAsync(() => { + const formControl = fixture.componentInstance.control; + const options = fixture.componentInstance.options.toArray(); + + expect(formControl.value).toBeFalsy('Expected no initial value.'); + + fixture.componentInstance.select.open(); + fixture.detectChanges(); + flush(); + + (overlayContainerElement.querySelectorAll('mat-option')[3] as HTMLElement).click(); + fixture.detectChanges(); + flush(); + + expect(formControl.value).toBe(options[3].value); + + dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW); + fixture.detectChanges(); + + expect(formControl.value).toBe(options[4].value); + })); + it('should select options via LEFT/RIGHT arrow keys on a closed select', fakeAsync(() => { const formControl = fixture.componentInstance.control; const options = fixture.componentInstance.options.toArray(); diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index 0e9603421ace..cd11b499f569 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -892,12 +892,14 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit, } else { option.selected ? this._selectionModel.select(option) : this._selectionModel.deselect(option); + if (isUserInput) { + this._keyManager.setActiveItem(option); + } + if (this.multiple) { this._sortValues(); if (isUserInput) { - this._keyManager.setActiveItem(option); - // In case the user selected 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