mat-datepicker with touchUI emits (closed) too soon?

[robert-king]

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);
  }

[crisbeto]

Will be fixed by #17732. Until then your workaround with the timeout should work.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}