Skip to content

Commit

Permalink
fix(input): undo firefox invalid style, fix maxlength in IE (#393)
Browse files Browse the repository at this point in the history
* 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.
  • Loading branch information
davidgabrichidze authored and jelbourn committed May 12, 2016
1 parent c32b06d commit dfe683b
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 5 deletions.
14 changes: 10 additions & 4 deletions src/components/input/input.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,18 @@ $md-input-underline-focused-color: md-color($md-primary);
$md-input-underline-disabled-background-image: linear-gradient(to right,
rgba(0,0,0,0.26) 0%, rgba(0,0,0,0.26) 33%, transparent 0%);

/**
* Undo the red box-shadow glow added by Firefox on invalid inputs.
* See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-ui-invalid
*/
:-moz-ui-invalid {
box-shadow: none;
}

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


:host {
display: inline-block;
position: relative;
Expand Down Expand Up @@ -120,7 +126,7 @@ $md-input-underline-disabled-background-image: linear-gradient(to right,

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

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

// The underline is what's shown under the input, its prefix and its suffix.
Expand Down
2 changes: 1 addition & 1 deletion src/components/input/input.ts
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
@Input() @BooleanFieldValue() floatingPlaceholder: boolean = true;
@Input() hintLabel: string = '';
@Input() id: string = `md-input-${nextUniqueId++}`;
@Input() maxLength: number = -1;
@Input() maxLength: number = null;
@Input() placeholder: string;
@Input() @BooleanFieldValue() required: boolean = false;
@Input() @BooleanFieldValue() spellcheck: boolean = false;
Expand Down

0 comments on commit dfe683b

Please sign in to comment.