skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(datepicker): avoid accidental form submissions through calendar buttons (#10515)

Browse Source 
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.
This commit is contained in:
Kristiyan Kostadinov
2018-04-07 00:49:14 +02:00
committed by Jeremy Elbourn
parent bcb5697a4e
commit edb57f969f
2 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/datepicker/calendar-header.html
+3 -3
View File
@@ -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>
src/lib/datepicker/calendar.spec.ts
+5 -2
View File
@@ -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', () => {