From 2170ff42ba0f10a6e976d71b26316df87e614d74 Mon Sep 17 00:00:00 2001 From: David Gabrichidze Date: Wed, 4 May 2016 23:04:32 +0400 Subject: [PATCH 1/3] 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 --- src/components/input/input.scss | 17 ++++++++++++++++- src/components/input/input.ts | 2 +- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/components/input/input.scss b/src/components/input/input.scss index 10a6453d936b..953c19fb33fa 100644 --- a/src/components/input/input.scss +++ b/src/components/input/input.scss @@ -19,6 +19,12 @@ $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%); +/** + * Removes firefox box-shadow on required fields... + */ +:-moz-ui-invalid { + box-shadow: none; +} /** * Applies a floating placeholder above the input itself. @@ -33,6 +39,15 @@ $md-input-underline-disabled-background-image: linear-gradient(to right, } } +/** + * Applies a floating placeholder above the input before chrome's and safari's auto-fill commits. + * Firefox has selector issues for :-webkit-autofill, thats why this mixin is duplicated and is used seperately below + */ +%md-input-placeholder-floating-autofill { + visibility: visible; + padding-bottom: 5px; + transform: translateY(-100%) scale(0.75); +} :host { display: inline-block; @@ -143,7 +158,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; + @extend %md-input-placeholder-floating-autofill; } // 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 c90d27ae0a4c..708a27f6c3fe 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -134,7 +134,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; From d9100238305567f054277d695282759f5cc2368c Mon Sep 17 00:00:00 2001 From: David Gabrichidze Date: Mon, 9 May 2016 23:37:23 +0400 Subject: [PATCH 2/3] after @jelbourn review --- src/components/input/input.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/input/input.scss b/src/components/input/input.scss index 953c19fb33fa..0f17d5a084f6 100644 --- a/src/components/input/input.scss +++ b/src/components/input/input.scss @@ -19,11 +19,12 @@ $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%); -/** - * Removes firefox box-shadow on required fields... +/** + * 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; + box-shadow: none; } /** From 4e914ab6b88e0398c5f829111b6d89997a0298dc Mon Sep 17 00:00:00 2001 From: David Gabrichidze Date: Wed, 11 May 2016 20:06:50 +0400 Subject: [PATCH 3/3] to placeholder, or not to placeholder? let's use the mixin. --- src/components/input/input.scss | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/src/components/input/input.scss b/src/components/input/input.scss index 0f17d5a084f6..e7bba3112668 100644 --- a/src/components/input/input.scss +++ b/src/components/input/input.scss @@ -30,7 +30,7 @@ $md-input-underline-disabled-background-image: linear-gradient(to right, /** * 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); @@ -40,16 +40,6 @@ $md-input-underline-disabled-background-image: linear-gradient(to right, } } -/** - * Applies a floating placeholder above the input before chrome's and safari's auto-fill commits. - * Firefox has selector issues for :-webkit-autofill, thats why this mixin is duplicated and is used seperately below - */ -%md-input-placeholder-floating-autofill { - visibility: visible; - padding-bottom: 5px; - transform: translateY(-100%) scale(0.75); -} - :host { display: inline-block; position: relative; @@ -136,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 @@ -159,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-autofill; + @include md-input-placeholder-floating; } // The underline is what's shown under the input, its prefix and its suffix.