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;