Skip to content

Commit 77b6a6d

Browse files
crisbetommalerba
authored andcommitted
fix(material/select): float label on focus if there's a placeholder (#19517)
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. (cherry picked from commit 7a972fb)
1 parent 933d17c commit 77b6a6d

File tree

2 files changed

+18
-4
lines changed

2 files changed

+18
-4
lines changed

src/material/select/select.spec.ts

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2378,7 +2378,7 @@ describe('MatSelect', () => {
23782378
.toBe(true, 'Label should be floating');
23792379
}));
23802380

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

23842384
TestBed.resetTestingModule();
@@ -2409,6 +2409,19 @@ describe('MatSelect', () => {
24092409
expect(formField.classList.contains('mat-form-field-should-float'))
24102410
.toBe(true, 'Label should be floating');
24112411
}));
2412+
2413+
it('should float the label on focus if it has a placeholder', fakeAsync(() => {
2414+
expect(fixture.componentInstance.placeholder).toBeTruthy();
2415+
2416+
fixture.componentInstance.floatLabel = 'auto';
2417+
fixture.detectChanges();
2418+
2419+
dispatchFakeEvent(fixture.nativeElement.querySelector('.mat-select'), 'focus');
2420+
fixture.detectChanges();
2421+
2422+
expect(formField.classList.contains('mat-form-field-should-float'))
2423+
.toBe(true, 'Label should be floating');
2424+
}));
24122425
});
24132426

24142427
describe('with a sibling component that throws an error', () => {
@@ -4992,7 +5005,7 @@ class BasicSelectOnPushPreselected {
49925005
selector: 'floating-label-select',
49935006
template: `
49945007
<mat-form-field [floatLabel]="floatLabel">
4995-
<mat-select placeholder="Food I want to eat right now" [formControl]="control">
5008+
<mat-select [placeholder]="placeholder" [formControl]="control">
49965009
<mat-option *ngFor="let food of foods" [value]="food.value">
49975010
{{ food.viewValue }}
49985011
</mat-option>
@@ -5002,6 +5015,7 @@ class BasicSelectOnPushPreselected {
50025015
})
50035016
class FloatLabelSelect {
50045017
floatLabel: FloatLabelType | null = 'auto';
5018+
placeholder = 'Food I want to eat right now';
50055019
control = new FormControl();
50065020
foods: any[] = [
50075021
{ value: 'steak-0', viewValue: 'Steak' },
@@ -5106,7 +5120,7 @@ class BasicSelectWithTheming {
51065120
selector: 'reset-values-select',
51075121
template: `
51085122
<mat-form-field>
5109-
<mat-select placeholder="Food" [formControl]="control">
5123+
<mat-select [formControl]="control">
51105124
<mat-option *ngFor="let food of foods" [value]="food.value">
51115125
{{ food.viewValue }}
51125126
</mat-option>

src/material/select/select.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1090,7 +1090,7 @@ export abstract class _MatSelectBase<C> extends _MatSelectMixinBase implements A
10901090
* @docs-private
10911091
*/
10921092
get shouldLabelFloat(): boolean {
1093-
return this._panelOpen || !this.empty;
1093+
return this._panelOpen || !this.empty || (this._focused && !!this._placeholder);
10941094
}
10951095

10961096
static ngAcceptInputType_required: BooleanInput;

0 commit comments

Comments
 (0)