Skip to content

Commit 85f83f9

Browse files
crisbetoandrewseguin
authored andcommitted
fix(select): alt + arrow key not opening in single-selection mode (#8910)
Fixes not being able to open a closed `mat-select` in single selection mode using the alt + up/down arrow combo. It seems like this was introduced when we added the ability go through the values using arrow keys on a closed select.
1 parent c23853f commit 85f83f9

File tree

2 files changed

+31
-1
lines changed

2 files changed

+31
-1
lines changed

src/lib/select/select.spec.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -253,6 +253,36 @@ describe('MatSelect', () => {
253253
'Expected value from second option to have been set on the model.');
254254
}));
255255

256+
it('should open a single-selection select using ALT + DOWN_ARROW', fakeAsync(() => {
257+
const {control: formControl, select: selectInstance} = fixture.componentInstance;
258+
259+
expect(selectInstance.panelOpen).toBe(false, 'Expected select to be closed.');
260+
expect(formControl.value).toBeFalsy('Expected no initial value.');
261+
262+
const event = createKeyboardEvent('keydown', DOWN_ARROW);
263+
Object.defineProperty(event, 'altKey', {get: () => true});
264+
265+
dispatchEvent(select, event);
266+
267+
expect(selectInstance.panelOpen).toBe(true, 'Expected select to be open.');
268+
expect(formControl.value).toBeFalsy('Expected value not to have changed.');
269+
}));
270+
271+
it('should open a single-selection select using ALT + UP_ARROW', fakeAsync(() => {
272+
const {control: formControl, select: selectInstance} = fixture.componentInstance;
273+
274+
expect(selectInstance.panelOpen).toBe(false, 'Expected select to be closed.');
275+
expect(formControl.value).toBeFalsy('Expected no initial value.');
276+
277+
const event = createKeyboardEvent('keydown', UP_ARROW);
278+
Object.defineProperty(event, 'altKey', {get: () => true});
279+
280+
dispatchEvent(select, event);
281+
282+
expect(selectInstance.panelOpen).toBe(true, 'Expected select to be open.');
283+
expect(formControl.value).toBeFalsy('Expected value not to have changed.');
284+
}));
285+
256286
it('should be able to select options by typing on a closed select', fakeAsync(() => {
257287
const formControl = fixture.componentInstance.control;
258288
const options = fixture.componentInstance.options.toArray();

src/lib/select/select.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -644,7 +644,7 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
644644
const isArrowKey = keyCode === DOWN_ARROW || keyCode === UP_ARROW;
645645
const isOpenKey = keyCode === ENTER || keyCode === SPACE;
646646

647-
if (isOpenKey || (this.multiple && isArrowKey)) {
647+
if (isOpenKey || ((this.multiple || event.altKey) && isArrowKey)) {
648648
event.preventDefault(); // prevents the page from scrolling down when pressing space
649649
this.open();
650650
} else if (!this.multiple) {

0 commit comments

Comments
 (0)