Skip to content

Commit dfe683b

Browse files
davidgabrichidzejelbourn
authored andcommitted
fix(input): undo firefox invalid style, fix maxlength in IE (#393)
* input's maxLength=-1 property not works in MS Edge Fix floating placeholder in Firefox, without affecting autofill behavior in Chrome/Safari Override and remove firefox box-shadow on required fields Fixes #342. Fixes #388.
1 parent c32b06d commit dfe683b

File tree

2 files changed

+11
-5
lines changed

2 files changed

+11
-5
lines changed

src/components/input/input.scss

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,18 @@ $md-input-underline-focused-color: md-color($md-primary);
1919
$md-input-underline-disabled-background-image: linear-gradient(to right,
2020
rgba(0,0,0,0.26) 0%, rgba(0,0,0,0.26) 33%, transparent 0%);
2121

22+
/**
23+
* Undo the red box-shadow glow added by Firefox on invalid inputs.
24+
* See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-ui-invalid
25+
*/
26+
:-moz-ui-invalid {
27+
box-shadow: none;
28+
}
2229

2330
/**
2431
* Applies a floating placeholder above the input itself.
2532
*/
26-
%md-input-placeholder-floating {
33+
@mixin md-input-placeholder-floating {
2734
visibility: visible;
2835
padding-bottom: 5px;
2936
transform: translateY(-100%) scale(0.75);
@@ -33,7 +40,6 @@ $md-input-underline-disabled-background-image: linear-gradient(to right,
3340
}
3441
}
3542

36-
3743
:host {
3844
display: inline-block;
3945
position: relative;
@@ -120,7 +126,7 @@ $md-input-underline-disabled-background-image: linear-gradient(to right,
120126

121127
// Show the placeholder above the input when it's not empty, or focused.
122128
&.md-float:not(.md-empty), &.md-float.md-focused {
123-
@extend %md-input-placeholder-floating;
129+
@include md-input-placeholder-floating;
124130
}
125131

126132
// :focus is applied to the input, but we apply md-focused to the other elements
@@ -143,7 +149,7 @@ $md-input-underline-disabled-background-image: linear-gradient(to right,
143149
// Once the autofill is committed, a change event happen and the regular md-input
144150
// classes take over to fulfill this behaviour.
145151
input:-webkit-autofill + .md-input-placeholder {
146-
@extend %md-input-placeholder-floating;
152+
@include md-input-placeholder-floating;
147153
}
148154

149155
// The underline is what's shown under the input, its prefix and its suffix.

src/components/input/input.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
138138
@Input() @BooleanFieldValue() floatingPlaceholder: boolean = true;
139139
@Input() hintLabel: string = '';
140140
@Input() id: string = `md-input-${nextUniqueId++}`;
141-
@Input() maxLength: number = -1;
141+
@Input() maxLength: number = null;
142142
@Input() placeholder: string;
143143
@Input() @BooleanFieldValue() required: boolean = false;
144144
@Input() @BooleanFieldValue() spellcheck: boolean = false;

0 commit comments

Comments
 (0)