bug(MatInput): Placeholder of MatInput not showing inside mat-option without mat-label

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:

image

Actual Behavior

The placeholder of the MatInput element is not displayed:

image

Environment

  • Angular: 10.0.x
  • CDK/Material: 10.1.0
  • Browser(s): Chrome, Edge
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

1 possible answer(s) on “bug(MatInput): Placeholder of MatInput not showing inside mat-option without mat-label

  1. If this worked before, it was by accident. From an accessibility standpoint, having an input inside an option doesn’t make sense. Projecting an input for a filterable select should be covered by #5697 already.