Skip to content

Commit aba4c44

Browse files
authored
fix(material/chips): chip input not showing placeholder (#30664)
The chip input is inheriting some styles from `MatInput` which were causing it not to show its placeholder unless it's focused. These changes override the inherited styles to show it correctly. Fixes #16380.
1 parent 1b4cae7 commit aba4c44

File tree

1 file changed

+17
-0
lines changed

1 file changed

+17
-0
lines changed

src/material/chips/chip-set.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use '../core/style/vendor-prefixes';
2+
13
// Ensures that the internal chip container spans the entire outer container width, if the
24
// outer container width is customized. This is used by some wrapper components in g3.
35
.mat-mdc-chip-set {
@@ -63,4 +65,19 @@ input.mat-mdc-chip-input {
6365
margin-left: 0;
6466
margin-right: 8px;
6567
}
68+
69+
// The form field hides the placeholder by default,
70+
// but we actually want to show it if there are chips.
71+
.mat-mdc-form-field:not(.mat-form-field-hide-placeholder) & {
72+
@include vendor-prefixes.input-placeholder {
73+
opacity: 1;
74+
}
75+
}
76+
77+
// The margin isn't necessary if the input is placed next to the chip set,
78+
// because it'll be on the next line.
79+
.mat-mdc-chip-set + & {
80+
margin-left: 0;
81+
margin-right: 0;
82+
}
6683
}

0 commit comments

Comments
 (0)