From 112be4a819b5b8c4b9f7643f43e50205b17210e8 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Wed, 21 Mar 2018 19:54:40 +0100
Subject: [PATCH] fix(datepicker): avoid accidental form submissions through
 calendar buttons

Sets all internal calendar buttons to be `type="button"` in order to avoid accidental submissions if the calendar is placed inside a form.

Fixes #10514.
---
 src/lib/datepicker/calendar-header.html | 6 +++---
 src/lib/datepicker/calendar.spec.ts     | 7 +++++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/lib/datepicker/calendar-header.html b/src/lib/datepicker/calendar-header.html
index c11663b6227e..c04edbe49329 100644
--- a/src/lib/datepicker/calendar-header.html
+++ b/src/lib/datepicker/calendar-header.html
@@ -1,6 +1,6 @@
 <div class="mat-calendar-header">
   <div class="mat-calendar-controls">
-    <button mat-button class="mat-calendar-period-button"
+    <button mat-button type="button" class="mat-calendar-period-button"
             (click)="currentPeriodClicked()" [attr.aria-label]="periodButtonLabel">
       {{periodButtonText}}
       <div class="mat-calendar-arrow" [class.mat-calendar-invert]="calendar.currentView != 'month'"></div>
@@ -8,12 +8,12 @@
 
     <div class="mat-calendar-spacer"></div>
 
-    <button mat-icon-button class="mat-calendar-previous-button"
+    <button mat-icon-button type="button" class="mat-calendar-previous-button"
             [disabled]="!previousEnabled()" (click)="previousClicked()"
             [attr.aria-label]="prevButtonLabel">
     </button>
 
-    <button mat-icon-button class="mat-calendar-next-button"
+    <button mat-icon-button type="button" class="mat-calendar-next-button"
             [disabled]="!nextEnabled()" (click)="nextClicked()"
             [attr.aria-label]="nextButtonLabel">
     </button>
diff --git a/src/lib/datepicker/calendar.spec.ts b/src/lib/datepicker/calendar.spec.ts
index bdcd25b50477..fb4b322666f7 100644
--- a/src/lib/datepicker/calendar.spec.ts
+++ b/src/lib/datepicker/calendar.spec.ts
@@ -113,9 +113,12 @@ describe('MatCalendar', () => {
         fixture.detectChanges();
 
         expect(button.getAttribute('aria-label')).toBe('Go to multi-year view?');
-      })
-    );
+      }));
 
+    it('should set all buttons to be `type="button"`', () => {
+      const invalidButtons = calendarElement.querySelectorAll('button:not([type="button"])');
+      expect(invalidButtons.length).toBe(0);
+    });
 
     describe('a11y', () => {
       describe('calendar body', () => {