mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
fix(select): consider value changes via arrow keys on closed select as user actions (#5112)
Fixes #5084.
This commit is contained in:
committed by
Kara
parent
3eb0681af9
commit
73aa43e98b
@@ -29,6 +29,7 @@ import {
|
||||
FloatPlaceholderType,
|
||||
MD_PLACEHOLDER_GLOBAL_OPTIONS
|
||||
} from '../core/placeholder/placeholder-options';
|
||||
import {map} from 'rxjs/operator/map';
|
||||
|
||||
|
||||
describe('MdSelect', () => {
|
||||
@@ -1676,6 +1677,17 @@ describe('MdSelect', () => {
|
||||
expect(event.defaultPrevented).toBe(true);
|
||||
});
|
||||
|
||||
it('should consider the selection as a result of a user action when closed', () => {
|
||||
const option = fixture.componentInstance.options.first;
|
||||
const spy = jasmine.createSpy('option selection spy');
|
||||
const subscription = map.call(option.onSelectionChange, e => e.isUserInput).subscribe(spy);
|
||||
|
||||
dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
|
||||
expect(spy).toHaveBeenCalledWith(true);
|
||||
|
||||
subscription.unsubscribe();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('for options', () => {
|
||||
|
||||
@@ -566,7 +566,7 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
|
||||
* Sets the selected option based on a value. If no option can be
|
||||
* found with the designated value, the select trigger is cleared.
|
||||
*/
|
||||
private _setSelectionByValue(value: any | any[]): void {
|
||||
private _setSelectionByValue(value: any | any[], isUserInput = false): void {
|
||||
const isArray = Array.isArray(value);
|
||||
|
||||
if (this.multiple && value && !isArray) {
|
||||
@@ -576,10 +576,10 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
|
||||
this._clearSelection();
|
||||
|
||||
if (isArray) {
|
||||
value.forEach((currentValue: any) => this._selectValue(currentValue));
|
||||
value.forEach((currentValue: any) => this._selectValue(currentValue, isUserInput));
|
||||
this._sortValues();
|
||||
} else {
|
||||
this._selectValue(value);
|
||||
this._selectValue(value, isUserInput);
|
||||
}
|
||||
|
||||
this._setValueWidth();
|
||||
@@ -595,14 +595,14 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
|
||||
* Finds and selects and option based on its value.
|
||||
* @returns Option that has the corresponding value.
|
||||
*/
|
||||
private _selectValue(value: any): MdOption {
|
||||
private _selectValue(value: any, isUserInput = false): MdOption {
|
||||
let optionsArray = this.options.toArray();
|
||||
let correspondingOption = optionsArray.find(option => {
|
||||
return option.value != null && option.value === value;
|
||||
});
|
||||
|
||||
if (correspondingOption) {
|
||||
correspondingOption.select();
|
||||
isUserInput ? correspondingOption._selectViaInteraction() : correspondingOption.select();
|
||||
this._selectionModel.select(correspondingOption);
|
||||
this._keyManager.setActiveItem(optionsArray.indexOf(correspondingOption));
|
||||
}
|
||||
@@ -1027,7 +1027,7 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
|
||||
|
||||
if (currentActiveItem !== prevActiveItem) {
|
||||
this._clearSelection();
|
||||
this._setSelectionByValue(currentActiveItem.value);
|
||||
this._setSelectionByValue(currentActiveItem.value, true);
|
||||
this._propagateChanges();
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user