diff --git a/ionic/components/input/input-base.ts b/ionic/components/input/input-base.ts index bac4b9dc80f..bf6e047ffe1 100644 --- a/ionic/components/input/input-base.ts +++ b/ionic/components/input/input-base.ts @@ -401,14 +401,6 @@ export class InputBase { } } - /** - * @private - */ - clearTextInput() { - console.debug('Should clear input'); - this._value = ''; - } - /** * @private */ diff --git a/ionic/components/input/input.ios.scss b/ionic/components/input/input.ios.scss index 9f07c0e8b14..dabb02dd45c 100644 --- a/ionic/components/input/input.ios.scss +++ b/ionic/components/input/input.ios.scss @@ -80,6 +80,7 @@ ion-input[clearInput] { bottom: 0; width: $text-input-ios-input-clear-icon-width; + height: 34px; background-size: $text-input-ios-input-clear-icon-size; } diff --git a/ionic/components/input/input.md.scss b/ionic/components/input/input.md.scss index ebdabd3ffaf..464c93a3e30 100644 --- a/ionic/components/input/input.md.scss +++ b/ionic/components/input/input.md.scss @@ -112,7 +112,7 @@ ion-input[clearInput] { @include svg-background-image($text-input-md-input-clear-icon-svg); right: ($item-md-padding-right / 2); - bottom: 2px; + bottom: 4px; width: $text-input-md-input-clear-icon-width; diff --git a/ionic/components/input/input.scss b/ionic/components/input/input.scss index e42c2de2bf5..2080e8ecd0e 100644 --- a/ionic/components/input/input.scss +++ b/ionic/components/input/input.scss @@ -127,6 +127,7 @@ input.text-input:-webkit-autofill { .text-input-clear-icon { position: absolute; + display: none; margin: 0; padding: 0; @@ -135,6 +136,10 @@ input.text-input:-webkit-autofill { background-position: center; } +.input-has-value .text-input-clear-icon { + display: block; +} + // Cloned Input // -------------------------------------------------- diff --git a/ionic/components/input/input.ts b/ionic/components/input/input.ts index 03586d6b9d5..b724ef0c07c 100644 --- a/ionic/components/input/input.ts +++ b/ionic/components/input/input.ts @@ -66,7 +66,7 @@ import {Platform} from '../../platform/platform'; template: '' + '' + - '' + + '' + '
', directives: [ NextInput, @@ -107,7 +107,10 @@ export class TextInput extends InputBase { * @private */ clearTextInput() { + console.debug("Should clear input"); this._value = ''; + this.onChange(this._value); + this.writeValue(this._value); } } diff --git a/ionic/components/input/input.wp.scss b/ionic/components/input/input.wp.scss index cb71558a36a..37cdecd5b61 100644 --- a/ionic/components/input/input.wp.scss +++ b/ionic/components/input/input.wp.scss @@ -108,7 +108,7 @@ ion-input[clearInput] { @include svg-background-image($text-input-wp-input-clear-icon-svg); right: ($item-wp-padding-right / 2); - bottom: 2px; + bottom: 7px; width: $text-input-wp-input-clear-icon-width; diff --git a/ionic/components/input/test/form-inputs/main.html b/ionic/components/input/test/form-inputs/main.html index 205cc147553..357d9594ae9 100644 --- a/ionic/components/input/test/form-inputs/main.html +++ b/ionic/components/input/test/form-inputs/main.html @@ -7,24 +7,24 @@
- + Email - + - + Username - + - + Password - + - + Comments - Comment value + Comment value
@@ -43,15 +43,15 @@ - + Username - + Password -
+
@@ -64,22 +64,22 @@ - + Email - + Username - + Password - + Comments Comment value