mat-datepicker with touchUI emits (closed) too soon? #17560
Description
Reproduction
Steps to reproduce:
https://stackblitz.com/edit/components-issue-oa5rhf
<mat-form-field>
<input
matInput
(focus)="picker.open()"
required
#input
name="date"
[matDatepicker]="picker"
formControlName="serializedDate"
placeholder="Working without blur">
<mat-datepicker-toggle
matSuffix
[for]="picker">
</mat-datepicker-toggle>
<mat-datepicker
[touchUi]="true"
#picker>
</mat-datepicker>
</mat-form-field>
<mat-form-field>
<input
matInput
(focus)="picker2.open()"
required
#input2
name="date"
[matDatepicker]="picker2"
formControlName="serializedDate"
placeholder="Broken with blur">
<mat-datepicker-toggle
matSuffix
[for]="picker2">
</mat-datepicker-toggle>
<mat-datepicker
[touchUi]="true"
(closed)="input2.blur()"
#picker2>
</mat-datepicker>
</mat-form-field>
Expected Behavior
picker closes and then (close) emits and input.blur() is called
Actual Behavior
close emits and blur is called before the other (focus) is called?
The screen flashes in a loop and is frozen / unresponsive
Environment
see stackblitz - everything is the latest as of today AFAIK
Note: I do have a fix for this already, if i set a BIG timeout on the input.blur() of 150 MS, then it doesn't happen.
delayInputBlur(input: HTMLElement) {
setTimeout(() => input.blur(), 150);
}