From 7b66b89e0ad9efa5f4a63723c147140b4c92aa58 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sat, 13 May 2017 16:20:05 +0200
Subject: [PATCH] fix(datepicker): calendar toggle submitting parent form

Prevents the toggle for the datepicker's calendar from submitting its parent form.

Fixes #4530.
---
 src/lib/datepicker/datepicker-toggle.ts | 5 +++++
 src/lib/datepicker/datepicker.spec.ts   | 9 +++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/lib/datepicker/datepicker-toggle.ts b/src/lib/datepicker/datepicker-toggle.ts
index c00f6da5686f..c5ba0b0b79c8 100644
--- a/src/lib/datepicker/datepicker-toggle.ts
+++ b/src/lib/datepicker/datepicker-toggle.ts
@@ -9,6 +9,7 @@ import {MdDatepickerIntl} from './datepicker-intl';
   template: '',
   styleUrls: ['datepicker-toggle.css'],
   host: {
+    '[attr.type]': 'type',
     '[class.mat-datepicker-toggle]': 'true',
     '[attr.aria-label]': '_intl.openCalendarLabel',
     '(click)': '_open($event)',
@@ -17,8 +18,12 @@ import {MdDatepickerIntl} from './datepicker-intl';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MdDatepickerToggle<D> {
+  /** Datepicker instance that the button will toggle. */
   @Input('mdDatepickerToggle') datepicker: MdDatepicker<D>;
 
+  /** Type of the button. */
+  @Input() type: string = 'button';
+
   @Input('matDatepickerToggle')
   get _datepicker() { return this.datepicker; }
   set _datepicker(v: MdDatepicker<D>) { this.datepicker = v; }
diff --git a/src/lib/datepicker/datepicker.spec.ts b/src/lib/datepicker/datepicker.spec.ts
index 19d91acfbc2e..2ee98ec2e4ad 100644
--- a/src/lib/datepicker/datepicker.spec.ts
+++ b/src/lib/datepicker/datepicker.spec.ts
@@ -374,7 +374,7 @@ describe('MdDatepicker', () => {
         fixture.detectChanges();
       }));
 
-      it('should open calendar when toggle clicked', async(() => {
+      it('should open calendar when toggle clicked', () => {
         expect(document.querySelector('md-dialog-container')).toBeNull();
 
         let toggle = fixture.debugElement.query(By.css('button'));
@@ -382,7 +382,12 @@ describe('MdDatepicker', () => {
         fixture.detectChanges();
 
         expect(document.querySelector('md-dialog-container')).not.toBeNull();
-      }));
+      });
+
+      it('should set the `button` type on the trigger to prevent form submissions', () => {
+        let toggle = fixture.debugElement.query(By.css('button')).nativeElement;
+        expect(toggle.getAttribute('type')).toBe('button');
+      });
     });
 
     describe('datepicker inside input-container', () => {