Skip to content

Commit 1030687

Browse files
committed
separate the "floating" logic from the "empty" logic
1 parent 1a2a4e7 commit 1030687

File tree

7 files changed

+44
-44
lines changed

7 files changed

+44
-44
lines changed

src/lib/form-field/_form-field-theme.scss

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414

1515
// Placeholder colors. Required is used for the `*` star shown in the placeholder.
1616
$placeholder-color: mat-color($foreground, secondary-text);
17-
$floating-placeholder-color: mat-color($primary);
17+
$focused-placeholder-color: mat-color($primary);
1818
$required-placeholder-color: mat-color($accent);
1919

2020
// Underline colors.
@@ -32,7 +32,7 @@
3232
}
3333

3434
.mat-focused .mat-form-field-placeholder {
35-
color: $floating-placeholder-color;
35+
color: $focused-placeholder-color;
3636

3737
&.mat-accent {
3838
color: $underline-color-accent;
@@ -42,12 +42,9 @@
4242
color: $underline-color-warn;
4343
}
4444
}
45-
46-
.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder,
47-
.mat-focused .mat-form-field-placeholder.mat-form-field-float {
48-
.mat-form-field-required-marker {
49-
color: $required-placeholder-color;
50-
}
45+
46+
.mat-focused .mat-form-field-required-marker {
47+
color: $required-placeholder-color;
5148
}
5249

5350
.mat-form-field-underline {
@@ -78,7 +75,7 @@
7875
color: $underline-color-warn;
7976

8077
&.mat-accent,
81-
&.mat-form-field-float .mat-form-field-required-marker {
78+
.mat-form-field-required-marker {
8279
color: $underline-color-warn;
8380
}
8481
}
@@ -178,8 +175,10 @@
178175
border-top: $infix-margin-top solid transparent;
179176
}
180177

181-
.mat-form-field-autofill-float {
182-
&:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float {
178+
.mat-form-field-can-float {
179+
&.mat-form-field-should-float .mat-form-field-placeholder,
180+
.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper
181+
.mat-form-field-placeholder {
183182
@include _mat-form-field-placeholder-floating(
184183
$subscript-font-scale, $infix-padding, $infix-margin-top);
185184
}
@@ -192,13 +191,6 @@
192191

193192
.mat-form-field-placeholder {
194193
top: $infix-margin-top + $infix-padding;
195-
196-
// Show the placeholder above the control when it's not empty, or focused.
197-
&.mat-form-field-float:not(.mat-form-field-empty),
198-
.mat-focused &.mat-form-field-float {
199-
@include _mat-form-field-placeholder-floating($subscript-font-scale,
200-
$infix-padding, $infix-margin-top);
201-
}
202194
}
203195

204196
.mat-form-field-underline {

src/lib/form-field/form-field-control.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,9 @@ export abstract class MdFormFieldControl<T> {
3636
/** Whether the control is empty. */
3737
readonly empty: boolean;
3838

39+
/** Whether the `MdFormField` label should try to float. */
40+
readonly shouldPlaceholderFloat: boolean;
41+
3942
/** Whether the control is required. */
4043
readonly required: boolean;
4144

src/lib/form-field/form-field.html

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,6 @@
1212
[attr.for]="_control.id"
1313
[class.mat-empty]="_control.empty && !_shouldAlwaysFloat"
1414
[class.mat-form-field-empty]="_control.empty && !_shouldAlwaysFloat"
15-
[class.mat-float]="_canPlaceholderFloat"
16-
[class.mat-form-field-float]="_canPlaceholderFloat"
1715
[class.mat-accent]="color == 'accent'"
1816
[class.mat-warn]="color == 'warn'"
1917
*ngIf="_hasPlaceholder()">

src/lib/form-field/form-field.scss

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -63,23 +63,6 @@ $mat-form-field-underline-height: 1px !default;
6363
min-width: 0;
6464
}
6565

66-
// Pseudo-class for Chrome and Safari auto-fill to move the placeholder to the floating position.
67-
// This is necessary because these browsers do not actually fire any events when a form auto-fill is
68-
// occurring. Once the autofill is committed, a change event happen and the regular md-form-field
69-
// classes take over to fulfill this behaviour. Assumes the autofill is non-empty.
70-
.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper {
71-
// The control is still technically empty at this point, so we need to hide non-floating
72-
// placeholders to prevent overlapping with the autofilled value.
73-
.mat-form-field-placeholder {
74-
display: none;
75-
}
76-
77-
.mat-form-field-float {
78-
display: block;
79-
transition: none;
80-
}
81-
}
82-
8366
// Used to hide the placeholder overflow on IE, since IE doesn't take transform into account when
8467
// determining overflow.
8568
.mat-form-field-placeholder-wrapper {
@@ -122,19 +105,35 @@ $mat-form-field-underline-height: 1px !default;
122105
// Hide the placeholder initially, and only show it when it's floating or the control is empty.
123106
display: none;
124107

125-
&.mat-form-field-empty,
126-
&.mat-form-field-float:not(.mat-form-field-empty),
127-
.mat-focused &.mat-form-field-float {
128-
display: block;
129-
}
130-
131108
[dir='rtl'] & {
132109
transform-origin: 100% 0;
133110
left: auto;
134111
right: 0;
135112
}
136113
}
137114

115+
.mat-form-field-empty.mat-form-field-placeholder,
116+
.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-placeholder {
117+
display: block;
118+
}
119+
120+
// Pseudo-class for Chrome and Safari auto-fill to move the placeholder to the floating position.
121+
// This is necessary because these browsers do not actually fire any events when a form auto-fill is
122+
// occurring. Once the autofill is committed, a change event happen and the regular md-form-field
123+
// classes take over to fulfill this behaviour.
124+
.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper
125+
.mat-form-field-placeholder {
126+
// The form field will be considered empty if it is autofilled, and therefore the placeholder will
127+
// be shown. Therefore we need to override it to hidden...
128+
display: none;
129+
130+
// ...and re-show it only if it's able to float.
131+
.mat-form-field-can-float & {
132+
display: block;
133+
transition: none;
134+
}
135+
}
136+
138137
// Disable the placeholder animation when the control is not empty (this prevents placeholder
139138
// animating up when the value is set programmatically).
140139
.mat-form-field-placeholder:not(.mat-form-field-empty) {

src/lib/form-field/form-field.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,8 @@ let nextUniqueId = 0;
7171
'class': 'mat-input-container mat-form-field',
7272
'[class.mat-input-invalid]': '_control.errorState',
7373
'[class.mat-form-field-invalid]': '_control.errorState',
74+
'[class.mat-form-field-can-float]': '_canPlaceholderFloat',
75+
'[class.mat-form-field-should-float]': '_control.shouldPlaceholderFloat || _shouldAlwaysFloat',
7476
'[class.mat-focused]': '_control.focused',
7577
'[class.mat-primary]': 'color == "primary"',
7678
'[class.mat-accent]': 'color == "accent"',

src/lib/input/input.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ let nextUniqueId = 0;
5252
@Directive({
5353
selector: `input[mdInput], textarea[mdInput], input[matInput], textarea[matInput]`,
5454
host: {
55-
'class': 'mat-input-element',
55+
'class': 'mat-input-element mat-form-field-autofill-float',
5656
// Native input properties that are overwritten by Angular inputs need to be synced with
5757
// the native input element. Otherwise property bindings for those don't work.
5858
'[attr.id]': 'id',
@@ -280,6 +280,9 @@ export class MdInput implements MdFormFieldControl<any>, OnChanges, OnDestroy, D
280280
!this._isBadInput();
281281
}
282282

283+
// Implemented as part of MdFormFieldControl.
284+
get shouldPlaceholderFloat(): boolean { return this.focused || !this.empty; }
285+
283286
// Implemented as part of MdFormFieldControl.
284287
setDescribedByIds(ids: string[]) { this._ariaDescribedby = ids.join(' '); }
285288

src/lib/select/select.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1170,6 +1170,9 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
11701170
this.focus();
11711171
this.open();
11721172
}
1173+
1174+
// Implemented as part of MdFormFieldControl.
1175+
get shouldPlaceholderFloat() { return !this.empty; }
11731176
}
11741177

11751178
/** Clamps a value n between min and max values. */

0 commit comments

Comments
 (0)