fix(form-field): placeholder not floating if autofilled (#6839)

If a form-field value is set through autofill, the floating placeholder should float and not overlay the form-field value. This doesn't work in Chrome because the `.mat-form-field-autofill-float` class doesn't exist and can't be set on the form-field control anyway.

Fixes #6837
This commit is contained in:
Paul Gschwendtner
2017-09-21 01:06:08 +02:00
committed by Jeremy Elbourn
parent 3ddf65b72f
commit 602a861621
3 changed files with 4 additions and 4 deletions
+2 -2
View File
@@ -49,7 +49,7 @@
}
}
.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder,
.mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-placeholder,
.mat-focused .mat-form-field-placeholder.mat-form-field-float {
.mat-form-field-required-marker {
color: $required-placeholder-color;
@@ -184,7 +184,7 @@
border-top: $infix-margin-top solid transparent;
}
.mat-form-field-autofill-float {
.mat-form-field-autofill-control {
&:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float {
@include _mat-form-field-placeholder-floating(
$subscript-font-scale, $infix-padding, $infix-margin-top);
+1 -1
View File
@@ -65,7 +65,7 @@ $mat-form-field-underline-height: 1px !default;
// This is necessary because these browsers do not actually fire any events when a form auto-fill is
// occurring. Once the autofill is committed, a change event happen and the regular md-form-field
// classes take over to fulfill this behaviour. Assumes the autofill is non-empty.
.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper {
.mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-placeholder-wrapper {
// The control is still technically empty at this point, so we need to hide non-floating
// placeholders to prevent overlapping with the autofilled value.
.mat-form-field-placeholder {
+1 -1
View File
@@ -52,7 +52,7 @@ let nextUniqueId = 0;
@Directive({
selector: `input[mdInput], textarea[mdInput], input[matInput], textarea[matInput]`,
host: {
'class': 'mat-input-element',
'class': 'mat-input-element mat-form-field-autofill-control',
// Native input properties that are overwritten by Angular inputs need to be synced with
// the native input element. Otherwise property bindings for those don't work.
'[id]': 'id',