angularangular-materialdaterangepickerangular-daterangepicker

mat-date-range-input propagates Enter key press if inside form

I faced with an issue/bug if mat-date-range-input inside a form and there is a button after it - the button is clicked if I press Enter inside date input field!

Here is example: stackblitz example

I tried stopPropagation() on inputs - but it doesn't help.

.html:

<form (ngSubmit)="onKeydown($event)">
<mat-form-field appearance="fill">
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [rangePicker]="picker">
    <input matStartDate placeholder="Start date" (keydown)="$event.stopPropagation()">
    <input matEndDate placeholder="End date">
  </mat-date-range-input>
  <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

<button  mat-icon-button 
(click)="openEdit($event)">
<mat-icon class="multi-select-button">add</mat-icon>
</button>

</form>

openEdit() should NOT be called if I press Enter inside date range picker!

Without form it works as expected.

Solution

  • Your button is considered as type="submit" by default inside the form. Add attribute type="button" to override this behaviour.