Skip to content

Commit 70e0170

Browse files
crisbetoandrewseguin
authored andcommitted
fix(material/autocomplete): don't handle enter events with modifier keys (#14717)
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. (cherry picked from commit 91afe3d)
1 parent 9752b1d commit 70e0170

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
@@ -1085,6 +1085,26 @@ describe('MDC-based MatAutocomplete', () => {
10851085
.toBe(false);
10861086
});
10871087

1088+
it('should not interfere with the ENTER key when pressing a modifier', fakeAsync(() => {
1089+
const trigger = fixture.componentInstance.trigger;
1090+
1091+
expect(input.value).toBeFalsy('Expected input to start off blank.');
1092+
expect(trigger.panelOpen).toBe(true, 'Expected panel to start off open.');
1093+
1094+
fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
1095+
flush();
1096+
fixture.detectChanges();
1097+
1098+
Object.defineProperty(ENTER_EVENT, 'altKey', {get: () => true});
1099+
fixture.componentInstance.trigger._handleKeydown(ENTER_EVENT);
1100+
fixture.detectChanges();
1101+
1102+
expect(trigger.panelOpen).toBe(true, 'Expected panel to remain open.');
1103+
expect(input.value).toBeFalsy('Expected input to remain blank.');
1104+
expect(ENTER_EVENT.defaultPrevented)
1105+
.toBe(false, 'Expected the default ENTER action not to have been prevented.');
1106+
}));
1107+
10881108
it('should fill the text field, not select an option, when SPACE is entered', () => {
10891109
typeInElement(input, 'New');
10901110
fixture.detectChanges();

src/material/autocomplete/autocomplete-trigger.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -394,7 +394,7 @@ export abstract class _MatAutocompleteTriggerBase
394394
event.preventDefault();
395395
}
396396

397-
if (this.activeOption && keyCode === ENTER && this.panelOpen) {
397+
if (this.activeOption && keyCode === ENTER && this.panelOpen && !hasModifierKey(event)) {
398398
this.activeOption._selectViaInteraction();
399399
this._resetActiveItem();
400400
event.preventDefault();

src/material/autocomplete/autocomplete.spec.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1081,6 +1081,26 @@ describe('MatAutocomplete', () => {
10811081
.toBe(false);
10821082
});
10831083

1084+
it('should not interfere with the ENTER key when pressing a modifier', fakeAsync(() => {
1085+
const trigger = fixture.componentInstance.trigger;
1086+
1087+
expect(input.value).toBeFalsy('Expected input to start off blank.');
1088+
expect(trigger.panelOpen).toBe(true, 'Expected panel to start off open.');
1089+
1090+
fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
1091+
flush();
1092+
fixture.detectChanges();
1093+
1094+
Object.defineProperty(ENTER_EVENT, 'altKey', {get: () => true});
1095+
fixture.componentInstance.trigger._handleKeydown(ENTER_EVENT);
1096+
fixture.detectChanges();
1097+
1098+
expect(trigger.panelOpen).toBe(true, 'Expected panel to remain open.');
1099+
expect(input.value).toBeFalsy('Expected input to remain blank.');
1100+
expect(ENTER_EVENT.defaultPrevented)
1101+
.toBe(false, 'Expected the default ENTER action not to have been prevented.');
1102+
}));
1103+
10841104
it('should fill the text field, not select an option, when SPACE is entered', () => {
10851105
typeInElement(input, 'New');
10861106
fixture.detectChanges();

0 commit comments

Comments
 (0)