Skip to content

Commit 84250b0

Browse files
committed
fix(material-experimental/mdc-select): float label on focus if there's a placeholder
This is the equivalent of #19517 for the MDC-based select. 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`.
1 parent 97f1ccc commit 84250b0

File tree

4 files changed

+28
-11
lines changed

4 files changed

+28
-11
lines changed

src/material-experimental/mdc-chips/chip-input.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import {MatChipTextControl} from './chip-text-control';
2525

2626
/** Represents an input event on a `matChipInput`. */
2727
export interface MatChipInputEvent {
28-
/**
28+
/**
2929
* The native `<input>` element that the event is being fired for.
3030
* @deprecated Use `MatChipInputEvent#chipInput.inputElement` instead.
3131
* @breaking-change 13.0.0 This property will be removed.
@@ -34,9 +34,9 @@ export interface MatChipInputEvent {
3434

3535
/** The value of the input. */
3636
value: string;
37-
38-
/**
39-
* Reference to the chip input that emitted the event.
37+
38+
/**
39+
* Reference to the chip input that emitted the event.
4040
* @breaking-change 13.0.0 This property will be made required.
4141
*/
4242
chipInput?: MatChipInput;

src/material-experimental/mdc-select/select.spec.ts

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2340,6 +2340,22 @@ describe('MDC-based MatSelect', () => {
23402340
expect(label.classList.contains('mdc-floating-label--float-above'))
23412341
.toBe(true, 'Label should be floating');
23422342
}));
2343+
2344+
it('should float the label on focus if it has a placeholder', fakeAsync(() => {
2345+
const fixture = TestBed.createComponent(FloatLabelSelect);
2346+
fixture.detectChanges();
2347+
expect(fixture.componentInstance.placeholder).toBeTruthy();
2348+
2349+
fixture.componentInstance.floatLabel = 'auto';
2350+
fixture.detectChanges();
2351+
2352+
dispatchFakeEvent(fixture.nativeElement.querySelector('.mat-mdc-select'), 'focus');
2353+
fixture.detectChanges();
2354+
2355+
const label = fixture.nativeElement.querySelector('.mat-mdc-form-field label');
2356+
expect(label.classList.contains('mdc-floating-label--float-above'))
2357+
.toBe(true, 'Label should be floating');
2358+
}));
23432359
});
23442360

23452361
describe('with a sibling component that throws an error', () => {
@@ -4098,7 +4114,7 @@ class BasicSelectOnPushPreselected {
40984114
template: `
40994115
<mat-form-field [floatLabel]="floatLabel">
41004116
<mat-label>Select a food</mat-label>
4101-
<mat-select placeholder="Food I want to eat right now" [formControl]="control">
4117+
<mat-select [placeholder]="placeholder" [formControl]="control">
41024118
<mat-option *ngFor="let food of foods" [value]="food.value">
41034119
{{ food.viewValue }}
41044120
</mat-option>
@@ -4109,6 +4125,7 @@ class BasicSelectOnPushPreselected {
41094125
class FloatLabelSelect {
41104126
floatLabel: FloatLabelType | null = 'auto';
41114127
control = new FormControl();
4128+
placeholder = 'Food I want to eat right now';
41124129
foods: any[] = [
41134130
{ value: 'steak-0', viewValue: 'Steak' },
41144131
{ value: 'pizza-1', viewValue: 'Pizza' },
@@ -4213,7 +4230,7 @@ class BasicSelectWithTheming {
42134230
template: `
42144231
<mat-form-field>
42154232
<mat-label>Select a food</mat-label>
4216-
<mat-select placeholder="Food" [formControl]="control">
4233+
<mat-select [formControl]="control">
42174234
<mat-option *ngFor="let food of foods" [value]="food.value">
42184235
{{ food.viewValue }}
42194236
</mat-option>

src/material-experimental/mdc-select/select.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ export class MatSelect extends _MatSelectBase<MatSelectChange> implements OnInit
116116
get shouldLabelFloat(): boolean {
117117
// Since the panel doesn't overlap the trigger, we
118118
// want the label to only float when there's a value.
119-
return !this.empty;
119+
return !this.empty || (this.focused && !!this.placeholder);
120120
}
121121

122122
ngOnInit() {

src/material/chips/chip-input.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import {MatChipTextControl} from './chip-text-control';
2525

2626
/** Represents an input event on a `matChipInput`. */
2727
export interface MatChipInputEvent {
28-
/**
28+
/**
2929
* The native `<input>` element that the event is being fired for.
3030
* @deprecated Use `MatChipInputEvent#chipInput.inputElement` instead.
3131
* @breaking-change 13.0.0 This property will be removed.
@@ -34,9 +34,9 @@ export interface MatChipInputEvent {
3434

3535
/** The value of the input. */
3636
value: string;
37-
38-
/**
39-
* Reference to the chip input that emitted the event.
37+
38+
/**
39+
* Reference to the chip input that emitted the event.
4040
* @breaking-change 13.0.0 This property will be made required.
4141
*/
4242
chipInput?: MatChipInput;

0 commit comments

Comments
 (0)