Skip to content

Commit

Permalink
fix(material/autocomplete): don't handle enter events with modifier k…
Browse files Browse the repository at this point in the history
…eys (#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)
  • Loading branch information
crisbeto authored and andrewseguin committed Jan 14, 2022
1 parent 9752b1d commit 70e0170
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 1 deletion.
20 changes: 20 additions & 0 deletions src/material-experimental/mdc-autocomplete/autocomplete.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1085,6 +1085,26 @@ describe('MDC-based MatAutocomplete', () => {
.toBe(false);
});

it('should not interfere with the ENTER key when pressing a modifier', fakeAsync(() => {
const trigger = fixture.componentInstance.trigger;

expect(input.value).toBeFalsy('Expected input to start off blank.');
expect(trigger.panelOpen).toBe(true, 'Expected panel to start off open.');

fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
flush();
fixture.detectChanges();

Object.defineProperty(ENTER_EVENT, 'altKey', {get: () => true});
fixture.componentInstance.trigger._handleKeydown(ENTER_EVENT);
fixture.detectChanges();

expect(trigger.panelOpen).toBe(true, 'Expected panel to remain open.');
expect(input.value).toBeFalsy('Expected input to remain blank.');
expect(ENTER_EVENT.defaultPrevented)
.toBe(false, 'Expected the default ENTER action not to have been prevented.');
}));

it('should fill the text field, not select an option, when SPACE is entered', () => {
typeInElement(input, 'New');
fixture.detectChanges();
Expand Down
2 changes: 1 addition & 1 deletion src/material/autocomplete/autocomplete-trigger.ts
Original file line number Diff line number Diff line change
Expand Up @@ -394,7 +394,7 @@ export abstract class _MatAutocompleteTriggerBase
event.preventDefault();
}

if (this.activeOption && keyCode === ENTER && this.panelOpen) {
if (this.activeOption && keyCode === ENTER && this.panelOpen && !hasModifierKey(event)) {
this.activeOption._selectViaInteraction();
this._resetActiveItem();
event.preventDefault();
Expand Down
20 changes: 20 additions & 0 deletions src/material/autocomplete/autocomplete.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1081,6 +1081,26 @@ describe('MatAutocomplete', () => {
.toBe(false);
});

it('should not interfere with the ENTER key when pressing a modifier', fakeAsync(() => {
const trigger = fixture.componentInstance.trigger;

expect(input.value).toBeFalsy('Expected input to start off blank.');
expect(trigger.panelOpen).toBe(true, 'Expected panel to start off open.');

fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
flush();
fixture.detectChanges();

Object.defineProperty(ENTER_EVENT, 'altKey', {get: () => true});
fixture.componentInstance.trigger._handleKeydown(ENTER_EVENT);
fixture.detectChanges();

expect(trigger.panelOpen).toBe(true, 'Expected panel to remain open.');
expect(input.value).toBeFalsy('Expected input to remain blank.');
expect(ENTER_EVENT.defaultPrevented)
.toBe(false, 'Expected the default ENTER action not to have been prevented.');
}));

it('should fill the text field, not select an option, when SPACE is entered', () => {
typeInElement(input, 'New');
fixture.detectChanges();
Expand Down

0 comments on commit 70e0170

Please sign in to comment.