mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
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:
committed by
Jeremy Elbourn
parent
3ddf65b72f
commit
602a861621
@@ -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);
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user