fix(input): remove old clearInput code and clean up UI, added onChange calls

references #6514

Author: brandyscarney

ionic/components/input/input-base.ts

@@ -401,14 +401,6 @@ export class InputBase {
     }
   }
 
-  /**
-    * @private
-   */
-  clearTextInput() {
-    console.debug('Should clear input');
-    this._value = '';
-  }
-
   /**
    * @private
    */

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;
 }

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;
 

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
 // --------------------------------------------------

ionic/components/input/input.ts

@@ -66,7 +66,7 @@ import {Platform} from '../../platform/platform';
   template:
     '<input [type]="type" [(ngModel)]="_value" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" [placeholder]="placeholder" class="text-input">' +
     '<input [type]="type" aria-hidden="true" next-input *ngIf="_useAssist">' +
-    '<button clear *ngIf="clearInput && value" type="button" class="text-input-clear-icon" (click)="clearTextInput()" (mousedown)="clearTextInput()"></button>' +
+    '<button clear [hidden]="!clearInput" type="button" class="text-input-clear-icon" (click)="clearTextInput()" (mousedown)="clearTextInput()"></button>' +
     '<div (touchstart)="pointerStart($event)" (touchend)="pointerEnd($event)" (mousedown)="pointerStart($event)" (mouseup)="pointerEnd($event)" class="input-cover" tappable *ngIf="_useAssist"></div>',
   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);
   }
 }
 

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;
 

ionic/components/input/test/form-inputs/main.html

@@ -7,24 +7,24 @@
   <form [ngFormModel]="loginForm" #mf="ngForm" novalidate>
 
     <ion-list>
-      <ion-item clearInput>
+      <ion-item>
         <ion-label floating>Email</ion-label>
-        <ion-input [(ngModel)]="login.email" ngControl="email" type="email" required></ion-input>
+        <ion-input clearInput [(ngModel)]="login.email" ngControl="email" type="email" required></ion-input>
       </ion-item>
 
-      <ion-item clearInput>
+      <ion-item>
         <ion-label floating>Username</ion-label>
-        <ion-input [(ngModel)]="login.username" ngControl="username"></ion-input>
+        <ion-input clearInput [(ngModel)]="login.username" ngControl="username"></ion-input>
       </ion-item>
 
-      <ion-item clearInput>
+      <ion-item>
         <ion-label>Password</ion-label>
-        <ion-input [(ngModel)]="login.password" ngControl="password" type="password" required></ion-input>
+        <ion-input clearInput [(ngModel)]="login.password" ngControl="password" type="password" required></ion-input>
       </ion-item>
 
-      <ion-item clearInput>
+      <ion-item>
         <ion-label>Comments</ion-label>
-        <ion-textarea [(ngModel)]="login.comments" ngControl="comments" required>Comment value</ion-textarea>
+        <ion-textarea clearInput [(ngModel)]="login.comments" ngControl="comments" required>Comment value</ion-textarea>
       </ion-item>
 
       <div padding-left padding-right>
@@ -43,15 +43,15 @@
 
   <form (ngSubmit)="submit($event, user)" #lf="ngForm">
     <ion-list>
-      <ion-item clearInput>
+      <ion-item>
         <ion-label floating>Username</ion-label>
         <ion-input [(ngModel)]="user.username" ngControl="username" required></ion-input>
       </ion-item>
-      <ion-item clearInput>
+      <ion-item>
         <ion-label floating>Password</ion-label>
         <ion-input type="password" [(ngModel)]="user.password" ngControl="password" required></ion-input>
       </ion-item>
-      <div padding-left padding-right clearInput>
+      <div padding-left padding-right>
         <button block type="submit">Login</button>
       </div>
       <div padding-left>
@@ -64,22 +64,22 @@
   </form>
 
   <ion-list>
-    <ion-item clearInput>
+    <ion-item>
       <ion-label>Email</ion-label>
       <ion-input type="email" required></ion-input>
     </ion-item>
 
-    <ion-item clearInput>
+    <ion-item>
       <ion-label>Username</ion-label>
       <ion-input></ion-input>
     </ion-item>
 
-    <ion-item clearInput>
+    <ion-item>
       <ion-label>Password</ion-label>
       <ion-input type="password" required></ion-input>
     </ion-item>
 
-    <ion-item clearInput>
+    <ion-item>
       <ion-label>Comments</ion-label>
       <ion-textarea required>Comment value</ion-textarea>
     </ion-item>