From dfe683bc3fdab80324738404c39fb7454fdcc6cc Mon Sep 17 00:00:00 2001
From: David Gabrichidze <davidgabrichidze@users.noreply.github.com>
Date: Thu, 12 May 2016 04:50:05 +0400
Subject: [PATCH] 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.
---
 src/components/input/input.scss | 14 ++++++++++----
 src/components/input/input.ts   |  2 +-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/input/input.scss b/src/components/input/input.scss
index 10a6453d936b..e7bba3112668 100644
--- a/src/components/input/input.scss
+++ b/src/components/input/input.scss
@@ -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);
@@ -33,7 +40,6 @@ $md-input-underline-disabled-background-image: linear-gradient(to right,
   }
 }
 
-
 :host {
   display: inline-block;
   position: relative;
@@ -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
@@ -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.
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index 2408d724ce36..104f63931e87 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -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;