mat-form-field: focus is reset when clicking the label

[pbogit]

Reproduction

Steps to reproduce:

1. Go to https://stackblitz.com/edit/angular-gnyjk4?file=src%2Fapp%2Fmaterial-module.ts
2. Click the form field -> the form field is focused and you can enter text
3. Click on the label "Input"

Expected Behavior

When clicking the label while the form field is focused, the focus should stay on the text field (behave the same like when clicking the text input itself).

Actual Behavior

The focus is quickly unset and then set again on the text field.
https://user-images.githubusercontent.com/29429581/129170022-8b6585e1-a6de-4397-a94c-0b5234845af3.mp4

Environment

• Angular: 12.1.1
• CDK/Material: Material 12.1.1
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

I think it's because elements are blurred on mousedown whereas the input gets refocused on click. I just tried swapping the click handler with a mousedown here, but it didn't help.