The placeholder of MatInput elements don’t display, when the input element is placed inside a mat-option in a mat-select and the surrounding mat-form-field does not have a label. This did not happen on Angular Material 10.0.x.
Reproduction
I couldn’t reproduce it on StackBlitz, but I’ve set up a repo:
https://github.com/dsimon-onventis/angular-material-input-placeholder-issue
Basically you need the following HTML code to reproduce:
<mat-form-field>
<mat-select>
<mat-option disabled>
<input matInput placeholder="Search">
</mat-option>
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2">Option 2</mat-option>
</mat-select>
</mat-form-field>
Expected Behavior
The placeholder of the MatInput element should be displayed:
Actual Behavior
The placeholder of the MatInput element is not displayed:
Environment
- Angular: 10.0.x
- CDK/Material: 10.1.0
- Browser(s): Chrome, Edge
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 10
If this worked before, it was by accident. From an accessibility standpoint, having an
input
inside anoption
doesn’t make sense. Projecting an input for a filterable select should be covered by #5697 already.