From b47cc472372512bf2ecff0cb7a593f233b517f42 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.html    | 6 +++---
 src/lib/datepicker/calendar.spec.ts | 7 +++++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/lib/datepicker/calendar.html b/src/lib/datepicker/calendar.html
index 1245f7a2f263..1c94c6777b17 100644
--- a/src/lib/datepicker/calendar.html
+++ b/src/lib/datepicker/calendar.html
@@ -1,6 +1,6 @@
 <div class="mat-calendar-header">
   <div class="mat-calendar-controls">
-    <button mat-button class="mat-calendar-period-button"
+    <button type="button" mat-button class="mat-calendar-period-button"
             (click)="_currentPeriodClicked()"  [attr.aria-label]="_periodButtonLabel">
       {{_periodButtonText}}
       <div class="mat-calendar-arrow" [class.mat-calendar-invert]="_currentView != 'month'"></div>
@@ -8,12 +8,12 @@
 
     <div class="mat-calendar-spacer"></div>
 
-    <button mat-icon-button class="mat-calendar-previous-button"
+    <button type="button" mat-icon-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 type="button" mat-icon-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 580056a18a6e..2441f556f1ae 100644
--- a/src/lib/datepicker/calendar.spec.ts
+++ b/src/lib/datepicker/calendar.spec.ts
@@ -220,9 +220,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', () => {