fix(input): sync value properly and add clear input button

packages/core/src/components/input/input-base.tsx

@@ -30,6 +30,9 @@ export interface InputBaseComponent {
   inputChanged: (ev: any) => void;
   inputFocused: (ev: any) => void;
   inputKeydown: (ev: any) => void;
+
+  setDisabled: (ev: any) => void;
+  setValue: (ev: any) => void;
 }
 
 export interface InputComponent extends InputBaseComponent {
@@ -47,6 +50,8 @@ export interface InputComponent extends InputBaseComponent {
   step: string;
   size: number;
   type: string;
+
+  setChecked: (ev: any) => void;
 }
 
 export interface TextareaComponent extends InputBaseComponent {

packages/core/src/components/input/input.ios.scss

@@ -178,5 +178,6 @@ $text-input-ios-highlight-color-invalid:   $text-input-highlight-color-invalid !
 
   width: $text-input-ios-input-clear-icon-width;
 
+  background-color: transparent;
   background-size: $text-input-ios-input-clear-icon-size;
 }

packages/core/src/components/input/input.md.scss

@@ -175,5 +175,6 @@ $text-input-md-highlight-color-invalid:     $text-input-highlight-color-invalid
 
   width: $text-input-md-input-clear-icon-width;
 
+  background-color: transparent;
   background-size: $text-input-md-input-clear-icon-size;
 }

packages/core/src/components/input/input.tsx

@@ -186,6 +186,20 @@ export class Input implements InputComponent {
    */
   @Prop({ state: true }) value: string;
 
+
+  /**
+   * @hidden
+   * Update the native input element when the value changes
+   */
+  @PropDidChange('value')
+  setValue() {
+    const inputEl = this.el.querySelector('input');
+    if (inputEl.value !== this.value) {
+      inputEl.value = this.value;
+    }
+  }
+
+
   ionViewDidLoad() {
     this.emitStyle();
 
@@ -285,7 +299,6 @@ export class Input implements InputComponent {
    * @hidden
    */
   clearTextInput() {
-    console.debug('Should clear input', this.el);
     this.value = '';
   }
 
@@ -310,7 +323,7 @@ export class Input implements InputComponent {
     const themedClasses = createThemedClasses(this.mode, this.color, 'text-input');
     // TODO aria-labelledby={this.item.labelId}
 
-    return (
+    return [
       <input
         aria-disabled={this.disabled ? 'true' : false}
         accept={this.accept}
@@ -342,7 +355,13 @@ export class Input implements InputComponent {
         onInput={this.inputChanged.bind(this)}
         onFocus={this.inputFocused.bind(this)}
         onKeyDown={this.inputKeydown.bind(this)}
-      />
-    )
+      />,
+      <button
+        hidden={this.clearInput !== true}
+        class="text-input-clear-icon"
+        onClick={this.clearTextInput.bind(this)}
+        onMouseDown={this.clearTextInput.bind(this)}>
+      </button>
+    ]
   }
 }

packages/core/src/components/input/input.wp.scss

@@ -158,5 +158,6 @@ $text-input-wp-highlight-color-invalid:     $text-input-highlight-color-invalid
 
   width: $text-input-wp-input-clear-icon-width;
 
+  background-color: transparent;
   background-size: $text-input-wp-input-clear-icon-size;
 }

packages/core/src/components/input/test/basic.html

@@ -20,6 +20,11 @@
           <ion-input></ion-input>
         </ion-item>
 
+        <ion-item>
+          <ion-label>Clear Input</ion-label>
+          <ion-input clear-input></ion-input>
+        </ion-item>
+
         <ion-item>
           <ion-label floating>Floating</ion-label>
           <ion-input checked></ion-input>

packages/core/src/components/input/test/textarea.html

@@ -50,6 +50,16 @@
           <ion-textarea id="dynamicReadonly" value="Readonly" readonly></ion-textarea>
         </ion-item>
 
+        <ion-item>
+          <ion-label>Dynamic Value</ion-label>
+          <ion-input id="dynamicValue" value="dynamic"></ion-input>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Dynamic Value</ion-label>
+          <ion-textarea id="dynamicTextareaValue" value="dynamic"></ion-textarea>
+        </ion-item>
+
         <ion-item>
           <ion-label color="primary">Clear on Edit</ion-label>
           <ion-textarea clear-on-edit="true"></ion-textarea>
@@ -69,6 +79,14 @@
         <ion-button color="secondary" onclick="toggleBoolean('dynamicReadonly', 'readonly')">
           Toggle Readonly
         </ion-button>
+
+        <ion-button color="light" onclick="toggleString('dynamicValue', 'value'); toggleString('dynamicTextareaValue', 'value')">
+          Toggle Value
+        </ion-button>
+
+        <ion-button color="danger" onclick="clearString('dynamicValue', 'value'); clearString('dynamicTextareaValue', 'value')">
+          Clear Value
+        </ion-button>
       </div>
     </ion-content>
 
@@ -80,6 +98,22 @@
         ele[prop] = isTrue;
         console.log('in toggleBoolean, setting', prop, 'to', isTrue);
       }
+
+      function toggleString(id, prop) {
+        var ele = document.getElementById(id);
+        console.log('INPUT ELE', ele);
+
+        var newString = ele[prop] === 'dynamic' ? 'changed' : 'dynamic';
+        ele[prop] = newString;
+        console.log('in toggleString, setting', prop, 'to', newString);
+      }
+
+      function clearString(id, prop) {
+        var ele = document.getElementById(id);
+
+        ele[prop] = '';
+        console.log('in toggleString, setting', prop, 'to', '');
+      }
     </script>
   </ion-app>
 </body>

packages/core/src/components/input/textarea.tsx

@@ -170,6 +170,17 @@ export class Textarea implements TextareaComponent {
    */
   @Prop({ state: true }) value: string;
 
+  /**
+   * @hidden
+   * Update the native input element when the value changes
+   */
+  @PropDidChange('value')
+  setValue() {
+    const inputEl = this.el.querySelector('textarea');
+    if (inputEl.value !== this.value) {
+      inputEl.value = this.value;
+    }
+  }
 
   ionViewDidLoad() {
     this.emitStyle();
@@ -197,7 +208,6 @@ export class Textarea implements TextareaComponent {
    * @hidden
    */
   clearTextInput() {
-    console.debug('Should clear input', this.el);
     this.value = '';
   }