diff --git a/src/material/chips/chip-grid.ts b/src/material/chips/chip-grid.ts index 01dfc3f1d2bb..a56f7792f91c 100644 --- a/src/material/chips/chip-grid.ts +++ b/src/material/chips/chip-grid.ts @@ -106,6 +106,7 @@ const _MatChipGridMixinBase = mixinErrorState(MatChipGridBase); '[class.mat-mdc-chip-list-disabled]': 'disabled', '[class.mat-mdc-chip-list-invalid]': 'errorState', '[class.mat-mdc-chip-list-required]': 'required', + '[class.mat-mdc-chip-list-placeholder]': '_chips && _chips.length', '(focus)': 'focus()', '(blur)': '_blur()', }, diff --git a/src/material/chips/chip-set.scss b/src/material/chips/chip-set.scss index 3ff0bb4d8a37..8dd660059cd3 100644 --- a/src/material/chips/chip-set.scss +++ b/src/material/chips/chip-set.scss @@ -39,3 +39,13 @@ input.mat-mdc-chip-input { margin-right: 8px; } } + +// This ensures that if we have any sort of data in our chips, we apply +// a class & set placeholder to be visible so it doesn't show only when +// form field is focused. +.mat-mdc-chip-list-placeholder { + // stylelint-disable-next-line material/no-prefixes + .mat-mdc-chip-input::placeholder { + opacity: 1; + } +}