diff --git a/src/material-experimental/mdc-chips/chip-input.ts b/src/material-experimental/mdc-chips/chip-input.ts
index 5a250fe8d03c..f0d7e00c7740 100644
--- a/src/material-experimental/mdc-chips/chip-input.ts
+++ b/src/material-experimental/mdc-chips/chip-input.ts
@@ -25,7 +25,7 @@ import {MatChipTextControl} from './chip-text-control';
/** Represents an input event on a `matChipInput`. */
export interface MatChipInputEvent {
- /**
+ /**
* The native `` element that the event is being fired for.
* @deprecated Use `MatChipInputEvent#chipInput.inputElement` instead.
* @breaking-change 13.0.0 This property will be removed.
@@ -34,9 +34,9 @@ export interface MatChipInputEvent {
/** The value of the input. */
value: string;
-
- /**
- * Reference to the chip input that emitted the event.
+
+ /**
+ * Reference to the chip input that emitted the event.
* @breaking-change 13.0.0 This property will be made required.
*/
chipInput?: MatChipInput;
diff --git a/src/material-experimental/mdc-select/select.spec.ts b/src/material-experimental/mdc-select/select.spec.ts
index cc06b75dd543..b78ff66f9f82 100644
--- a/src/material-experimental/mdc-select/select.spec.ts
+++ b/src/material-experimental/mdc-select/select.spec.ts
@@ -2340,6 +2340,22 @@ describe('MDC-based MatSelect', () => {
expect(label.classList.contains('mdc-floating-label--float-above'))
.toBe(true, 'Label should be floating');
}));
+
+ it('should float the label on focus if it has a placeholder', fakeAsync(() => {
+ const fixture = TestBed.createComponent(FloatLabelSelect);
+ fixture.detectChanges();
+ expect(fixture.componentInstance.placeholder).toBeTruthy();
+
+ fixture.componentInstance.floatLabel = 'auto';
+ fixture.detectChanges();
+
+ dispatchFakeEvent(fixture.nativeElement.querySelector('.mat-mdc-select'), 'focus');
+ fixture.detectChanges();
+
+ const label = fixture.nativeElement.querySelector('.mat-mdc-form-field label');
+ expect(label.classList.contains('mdc-floating-label--float-above'))
+ .toBe(true, 'Label should be floating');
+ }));
});
describe('with a sibling component that throws an error', () => {
@@ -4098,7 +4114,7 @@ class BasicSelectOnPushPreselected {
template: `
Select a food
-
+
{{ food.viewValue }}
@@ -4109,6 +4125,7 @@ class BasicSelectOnPushPreselected {
class FloatLabelSelect {
floatLabel: FloatLabelType | null = 'auto';
control = new FormControl();
+ placeholder = 'Food I want to eat right now';
foods: any[] = [
{ value: 'steak-0', viewValue: 'Steak' },
{ value: 'pizza-1', viewValue: 'Pizza' },
@@ -4213,7 +4230,7 @@ class BasicSelectWithTheming {
template: `
Select a food
-
+
{{ food.viewValue }}
diff --git a/src/material-experimental/mdc-select/select.ts b/src/material-experimental/mdc-select/select.ts
index 15d1c2162a92..56c3add73428 100644
--- a/src/material-experimental/mdc-select/select.ts
+++ b/src/material-experimental/mdc-select/select.ts
@@ -116,7 +116,7 @@ export class MatSelect extends _MatSelectBase implements OnInit
get shouldLabelFloat(): boolean {
// Since the panel doesn't overlap the trigger, we
// want the label to only float when there's a value.
- return !this.empty;
+ return !this.empty || (this.focused && !!this.placeholder);
}
ngOnInit() {
diff --git a/src/material/chips/chip-input.ts b/src/material/chips/chip-input.ts
index cec8388f4667..61b42772e313 100644
--- a/src/material/chips/chip-input.ts
+++ b/src/material/chips/chip-input.ts
@@ -25,7 +25,7 @@ import {MatChipTextControl} from './chip-text-control';
/** Represents an input event on a `matChipInput`. */
export interface MatChipInputEvent {
- /**
+ /**
* The native `` element that the event is being fired for.
* @deprecated Use `MatChipInputEvent#chipInput.inputElement` instead.
* @breaking-change 13.0.0 This property will be removed.
@@ -34,9 +34,9 @@ export interface MatChipInputEvent {
/** The value of the input. */
value: string;
-
- /**
- * Reference to the chip input that emitted the event.
+
+ /**
+ * Reference to the chip input that emitted the event.
* @breaking-change 13.0.0 This property will be made required.
*/
chipInput?: MatChipInput;