Skip to content

Commit

Permalink
fix(select): float label on focus if there's a placeholder
Browse files Browse the repository at this point in the history
Historically we've only floated the `mat-select` label if a value is selected or the panel is open, because we wouldn't otherwise have anything to show. These changes make it so that we also float it on focus, if there's `placeholder` text that can be shown. This behavior is consistent with `MatInput`.

Fixes #19514.
  • Loading branch information
crisbeto committed Sep 28, 2020
1 parent 4ef3d3f commit ba74a58
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 4 deletions.
20 changes: 17 additions & 3 deletions src/material/select/select.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2332,7 +2332,7 @@ describe('MatSelect', () => {
.toBe(true, 'Label should be floating');
}));

it ('should default to global floating label type', fakeAsync(() => {
it('should default to global floating label type', fakeAsync(() => {
fixture.destroy();

TestBed.resetTestingModule();
Expand Down Expand Up @@ -2360,6 +2360,19 @@ describe('MatSelect', () => {
expect(formField.classList.contains('mat-form-field-should-float'))
.toBe(true, 'Label should be floating');
}));

it('should float the label on focus if it has a placeholder', fakeAsync(() => {
expect(fixture.componentInstance.placeholder).toBeTruthy();

fixture.componentInstance.floatLabel = 'auto';
fixture.detectChanges();

dispatchFakeEvent(fixture.nativeElement.querySelector('.mat-select'), 'focus');
fixture.detectChanges();

expect(formField.classList.contains('mat-form-field-should-float'))
.toBe(true, 'Label should be floating');
}));
});

describe('with a sibling component that throws an error', () => {
Expand Down Expand Up @@ -4870,7 +4883,7 @@ class BasicSelectOnPushPreselected {
selector: 'floating-label-select',
template: `
<mat-form-field [floatLabel]="floatLabel">
<mat-select placeholder="Food I want to eat right now" [formControl]="control">
<mat-select [placeholder]="placeholder" [formControl]="control">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{ food.viewValue }}
</mat-option>
Expand All @@ -4880,6 +4893,7 @@ class BasicSelectOnPushPreselected {
})
class FloatLabelSelect {
floatLabel: FloatLabelType | null = 'auto';
placeholder = 'Food I want to eat right now';
control = new FormControl();
foods: any[] = [
{ value: 'steak-0', viewValue: 'Steak' },
Expand Down Expand Up @@ -4984,7 +4998,7 @@ class BasicSelectWithTheming {
selector: 'reset-values-select',
template: `
<mat-form-field>
<mat-select placeholder="Food" [formControl]="control">
<mat-select [formControl]="control">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{ food.viewValue }}
</mat-option>
Expand Down
2 changes: 1 addition & 1 deletion src/material/select/select.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1081,7 +1081,7 @@ export abstract class _MatSelectBase<C> extends _MatSelectMixinBase implements A
* @docs-private
*/
get shouldLabelFloat(): boolean {
return this._panelOpen || !this.empty;
return this._panelOpen || !this.empty || (this._focused && !!this._placeholder);
}

static ngAcceptInputType_required: BooleanInput;
Expand Down

0 comments on commit ba74a58

Please sign in to comment.