diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts index cdc00c36aeba..a733b9b68b9f 100644 --- a/src/lib/autocomplete/autocomplete-trigger.ts +++ b/src/lib/autocomplete/autocomplete-trigger.ts @@ -298,6 +298,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy { _handleKeydown(event: KeyboardEvent): void { if (event.keyCode === ESCAPE && this.panelOpen) { this.closePanel(); + event.stopPropagation(); } else if (this.activeOption && event.keyCode === ENTER && this.panelOpen) { this.activeOption._selectViaInteraction(); event.preventDefault(); diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts index d043c13ee17f..a876338d6d42 100644 --- a/src/lib/autocomplete/autocomplete.spec.ts +++ b/src/lib/autocomplete/autocomplete.spec.ts @@ -897,6 +897,7 @@ describe('MdAutocomplete', () => { it('should close the panel when pressing escape', async(() => { const trigger = fixture.componentInstance.trigger; const escapeEvent = createKeyboardEvent('keydown', ESCAPE); + const stopPropagationSpy = spyOn(escapeEvent, 'stopPropagation').and.callThrough(); input.focus(); @@ -908,6 +909,7 @@ describe('MdAutocomplete', () => { expect(document.activeElement).toBe(input, 'Expected input to continue to be focused.'); expect(trigger.panelOpen).toBe(false, 'Expected panel to be closed.'); + expect(stopPropagationSpy).toHaveBeenCalled(); }); })); diff --git a/src/lib/datepicker/datepicker.spec.ts b/src/lib/datepicker/datepicker.spec.ts index 6f8a891fca51..8b7309003719 100644 --- a/src/lib/datepicker/datepicker.spec.ts +++ b/src/lib/datepicker/datepicker.spec.ts @@ -9,8 +9,13 @@ import {MdDatepickerInput} from './datepicker-input'; import {MdInputModule} from '../input/index'; import {MdNativeDateModule} from '../core/datetime/index'; import {ESCAPE, OverlayContainer} from '../core'; -import {dispatchFakeEvent, dispatchMouseEvent, dispatchKeyboardEvent} from '@angular/cdk/testing'; import {DEC, JAN} from '../core/testing/month-constants'; +import { + dispatchFakeEvent, + dispatchMouseEvent, + createKeyboardEvent, + dispatchEvent, +} from '@angular/cdk/testing'; describe('MdDatepicker', () => { afterEach(inject([OverlayContainer], (container: OverlayContainer) => { @@ -134,13 +139,17 @@ describe('MdDatepicker', () => { let content = document.querySelector('.cdk-overlay-pane md-datepicker-content')!; expect(content).toBeTruthy('Expected datepicker to be open.'); - let keyboadEvent = dispatchKeyboardEvent(content, 'keydown', ESCAPE); + const keyboardEvent = createKeyboardEvent('keydown', ESCAPE); + const stopPropagationSpy = spyOn(keyboardEvent, 'stopPropagation').and.callThrough(); + + dispatchEvent(content, keyboardEvent); fixture.detectChanges(); content = document.querySelector('.cdk-overlay-pane md-datepicker-content')!; expect(content).toBeFalsy('Expected datepicker to be closed.'); - expect(keyboadEvent.defaultPrevented) + expect(stopPropagationSpy).toHaveBeenCalled(); + expect(keyboardEvent.defaultPrevented) .toBe(true, 'Expected default ESCAPE action to be prevented.'); }); diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts index 2200b1c0eaea..058ab377f19d 100644 --- a/src/lib/datepicker/datepicker.ts +++ b/src/lib/datepicker/datepicker.ts @@ -106,6 +106,7 @@ export class MdDatepickerContent implements AfterContentInit { if (event.keyCode === ESCAPE) { this.datepicker.close(); event.preventDefault(); + event.stopPropagation(); } } } diff --git a/src/lib/menu/menu-directive.ts b/src/lib/menu/menu-directive.ts index 021131e3ae9c..7e0ea30f3468 100644 --- a/src/lib/menu/menu-directive.ts +++ b/src/lib/menu/menu-directive.ts @@ -168,6 +168,7 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy { switch (event.keyCode) { case ESCAPE: this.close.emit('keydown'); + event.stopPropagation(); break; case LEFT_ARROW: if (this.parentMenu && this.direction === 'ltr') { diff --git a/src/lib/menu/menu.spec.ts b/src/lib/menu/menu.spec.ts index c1e177b1ec7e..775a6826f5f7 100644 --- a/src/lib/menu/menu.spec.ts +++ b/src/lib/menu/menu.spec.ts @@ -29,7 +29,12 @@ import { } from './index'; import {MENU_PANEL_TOP_PADDING} from './menu-trigger'; import {extendObject} from '../core/util/object-extend'; -import {dispatchKeyboardEvent, dispatchMouseEvent} from '@angular/cdk/testing'; +import { + dispatchKeyboardEvent, + dispatchMouseEvent, + dispatchEvent, + createKeyboardEvent, +} from '@angular/cdk/testing'; describe('MdMenu', () => { @@ -103,11 +108,15 @@ describe('MdMenu', () => { fixture.componentInstance.trigger.openMenu(); const panel = overlayContainerElement.querySelector('.mat-menu-panel')!; - dispatchKeyboardEvent(panel, 'keydown', ESCAPE); + const event = createKeyboardEvent('keydown', ESCAPE); + const stopPropagationSpy = spyOn(event, 'stopPropagation').and.callThrough(); + + dispatchEvent(panel, event); fixture.detectChanges(); tick(500); expect(overlayContainerElement.textContent).toBe(''); + expect(stopPropagationSpy).toHaveBeenCalled(); })); it('should open a custom menu', () => {