Skip to content

Commit e08ca2d

Browse files
committed
fix(autocomplete): handle escape key
* Closes the autocomplete panel when pressing escape. * Switches the autocomplete unit tests to using the common utility for creating fake keyboard events.
1 parent 0e24345 commit e08ca2d

File tree

2 files changed

+22
-3
lines changed

2 files changed

+22
-3
lines changed

src/lib/autocomplete/autocomplete-trigger.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {PositionStrategy} from '../core/overlay/position/position-strategy';
1919
import {ConnectedPositionStrategy} from '../core/overlay/position/connected-position-strategy';
2020
import {Observable} from 'rxjs/Observable';
2121
import {MdOptionSelectionChange, MdOption} from '../core/option/option';
22-
import {ENTER, UP_ARROW, DOWN_ARROW} from '../core/keyboard/keycodes';
22+
import {ENTER, UP_ARROW, DOWN_ARROW, ESCAPE} from '../core/keyboard/keycodes';
2323
import {Dir} from '../core/rtl/dir';
2424
import {MdInputContainer} from '../input/input-container';
2525
import {ScrollDispatcher} from '../core/overlay/scroll/scroll-dispatcher';
@@ -231,7 +231,9 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
231231
}
232232

233233
_handleKeydown(event: KeyboardEvent): void {
234-
if (this.activeOption && event.keyCode === ENTER) {
234+
if (event.keyCode === ESCAPE && this.panelOpen) {
235+
this.closePanel();
236+
} else if (this.activeOption && event.keyCode === ENTER) {
235237
this.activeOption._selectViaInteraction();
236238
event.preventDefault();
237239
} else {

src/lib/autocomplete/autocomplete.spec.ts

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {MdInputModule} from '../input/index';
1616
import {Dir, LayoutDirection} from '../core/rtl/dir';
1717
import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
1818
import {Subscription} from 'rxjs/Subscription';
19-
import {ENTER, DOWN_ARROW, SPACE, UP_ARROW} from '../core/keyboard/keycodes';
19+
import {ENTER, DOWN_ARROW, SPACE, UP_ARROW, ESCAPE} from '../core/keyboard/keycodes';
2020
import {MdOption} from '../core/option/option';
2121
import {MdAutocomplete} from './autocomplete';
2222
import {MdInputContainer} from '../input/input-container';
@@ -758,6 +758,23 @@ describe('MdAutocomplete', () => {
758758
expect(scrollContainer.scrollTop).toEqual(272, `Expected panel to reveal last option.`);
759759
}));
760760

761+
it('should close the panel when pressing escape', async(() => {
762+
const trigger = fixture.componentInstance.trigger;
763+
const escapeEvent = createKeyboardEvent('keydown', ESCAPE);
764+
765+
input.focus();
766+
767+
fixture.whenStable().then(() => {
768+
expect(document.activeElement).toBe(input, 'Expected input to be focused.');
769+
expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
770+
771+
trigger._handleKeydown(escapeEvent);
772+
773+
expect(document.activeElement).toBe(input, 'Expected input to continue to be focused.');
774+
expect(trigger.panelOpen).toBe(false, 'Expected panel to be closed.');
775+
});
776+
}));
777+
761778
});
762779

763780
describe('aria', () => {

0 commit comments

Comments
 (0)