Skip to content

Commit c09aa52

Browse files
committed
fix(material/autocomplete): don't handle enter events with modifier keys
Doesn't handle `ENTER` key presses and doesn't prevent their default action, if they have a modifier, in order to avoid intefering with any OS-level shortcuts.
1 parent ade0901 commit c09aa52

File tree

3 files changed

+41
-1
lines changed

3 files changed

+41
-1
lines changed

src/material-experimental/mdc-autocomplete/autocomplete.spec.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1005,6 +1005,26 @@ describe('MDC-based MatAutocomplete', () => {
10051005
expect(ENTER_EVENT.defaultPrevented).toBe(false, 'Default action should not be prevented.');
10061006
});
10071007

1008+
it('should not interfere with the ENTER key when pressing a modifier', fakeAsync(() => {
1009+
const trigger = fixture.componentInstance.trigger;
1010+
1011+
expect(input.value).toBeFalsy('Expected input to start off blank.');
1012+
expect(trigger.panelOpen).toBe(true, 'Expected panel to start off open.');
1013+
1014+
fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
1015+
flush();
1016+
fixture.detectChanges();
1017+
1018+
Object.defineProperty(ENTER_EVENT, 'altKey', {get: () => true});
1019+
fixture.componentInstance.trigger._handleKeydown(ENTER_EVENT);
1020+
fixture.detectChanges();
1021+
1022+
expect(trigger.panelOpen).toBe(true, 'Expected panel to remain open.');
1023+
expect(input.value).toBeFalsy('Expected input to remain blank.');
1024+
expect(ENTER_EVENT.defaultPrevented)
1025+
.toBe(false, 'Expected the default ENTER action not to have been prevented.');
1026+
}));
1027+
10081028
it('should fill the text field, not select an option, when SPACE is entered', () => {
10091029
typeInElement(input, 'New');
10101030
fixture.detectChanges();

src/material/autocomplete/autocomplete-trigger.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -378,7 +378,7 @@ export abstract class _MatAutocompleteTriggerBase implements ControlValueAccesso
378378
event.preventDefault();
379379
}
380380

381-
if (this.activeOption && keyCode === ENTER && this.panelOpen) {
381+
if (this.activeOption && keyCode === ENTER && this.panelOpen && !hasModifierKey(event)) {
382382
this.activeOption._selectViaInteraction();
383383
this._resetActiveItem();
384384
event.preventDefault();

src/material/autocomplete/autocomplete.spec.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1000,6 +1000,26 @@ describe('MatAutocomplete', () => {
10001000
expect(ENTER_EVENT.defaultPrevented).toBe(false, 'Default action should not be prevented.');
10011001
});
10021002

1003+
it('should not interfere with the ENTER key when pressing a modifier', fakeAsync(() => {
1004+
const trigger = fixture.componentInstance.trigger;
1005+
1006+
expect(input.value).toBeFalsy('Expected input to start off blank.');
1007+
expect(trigger.panelOpen).toBe(true, 'Expected panel to start off open.');
1008+
1009+
fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
1010+
flush();
1011+
fixture.detectChanges();
1012+
1013+
Object.defineProperty(ENTER_EVENT, 'altKey', {get: () => true});
1014+
fixture.componentInstance.trigger._handleKeydown(ENTER_EVENT);
1015+
fixture.detectChanges();
1016+
1017+
expect(trigger.panelOpen).toBe(true, 'Expected panel to remain open.');
1018+
expect(input.value).toBeFalsy('Expected input to remain blank.');
1019+
expect(ENTER_EVENT.defaultPrevented)
1020+
.toBe(false, 'Expected the default ENTER action not to have been prevented.');
1021+
}));
1022+
10031023
it('should fill the text field, not select an option, when SPACE is entered', () => {
10041024
typeInElement(input, 'New');
10051025
fixture.detectChanges();

0 commit comments

Comments
 (0)