Combined Input and Select Broken

[ebenh]

When you combine <input> and <mat-select> using <mat-form-field>, the result is broken when <mat-select> precedes <input>.

However, things work as expected when <mat-select> follows <input>.

Reproduction

Steps to reproduce: https://stackblitz.com/edit/angular9-material-combined-select-input

Expected Behavior

When combined, <input> and <mat-select> should behave independently.

Actual Behavior

When <mat-select> precedes <input>:

Clicking the <input> activates the <mat-select>'s drop down.

Moreover, you're unable to select the <input> using the mouse. Tab selecting the <input> does work however.

Environment

• Angular: 9.1.0
• CDK/Material: 9.2.0
• Browser(s): Chrome 80.0.3987.149 (Official Build) (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

The fact that one of these works is by accident. We don't support having more than one control in a mat-form-field at a time.

[angular-automatic-lock-bot[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.}