diff --git a/src/lib/core/option/option.ts b/src/lib/core/option/option.ts index b41ef375fb73..0957a4a8ad44 100644 --- a/src/lib/core/option/option.ts +++ b/src/lib/core/option/option.ts @@ -149,6 +149,9 @@ export class MdOption { _handleKeydown(event: KeyboardEvent): void { if (event.keyCode === ENTER || event.keyCode === SPACE) { this._selectViaInteraction(); + + // Prevent the page from scrolling down and form submits. + event.preventDefault(); } } diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts index 626e02bf0ad4..fb6af9731271 100644 --- a/src/lib/select/select.spec.ts +++ b/src/lib/select/select.spec.ts @@ -277,6 +277,26 @@ describe('MdSelect', () => { expect(panel.classList).toContain('custom-two'); }); + it('should prevent the default action when pressing SPACE on an option', () => { + trigger.click(); + fixture.detectChanges(); + + const option = overlayContainerElement.querySelector('md-option'); + const event = dispatchKeyboardEvent(option, 'keydown', SPACE); + + expect(event.defaultPrevented).toBe(true); + }); + + it('should prevent the default action when pressing ENTER on an option', () => { + trigger.click(); + fixture.detectChanges(); + + const option = overlayContainerElement.querySelector('md-option'); + const event = dispatchKeyboardEvent(option, 'keydown', ENTER); + + expect(event.defaultPrevented).toBe(true); + }); + }); describe('selection logic', () => {