From 11b8e085675ec72be5c1c4ae636d627740dbf12a Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Mon, 1 Feb 2016 14:16:44 -0600
Subject: [PATCH] fix(input): add/remove disabled on native text input

Close #5280
---
 ionic/components/input/input-base.ts              | 14 ++++++++++++++
 ionic/components/input/input.scss                 |  4 ++++
 ionic/components/input/native-input.ts            |  4 ++++
 ionic/components/input/test/form-inputs/index.ts  |  4 ++++
 ionic/components/input/test/form-inputs/main.html | 14 ++++++++++++++
 5 files changed, 40 insertions(+)

diff --git a/ionic/components/input/input-base.ts b/ionic/components/input/input-base.ts
index 7130a07def..077f524e4f 100644
--- a/ionic/components/input/input-base.ts
+++ b/ionic/components/input/input-base.ts
@@ -6,6 +6,7 @@ import {Content} from '../content/content';
 import {Form} from '../../util/form';
 import {Item} from '../item/item';
 import {IonicApp} from '../app/app';
+import {isTrueProperty} from '../../util/util';
 import {Label} from '../label/label';
 import {pointerCoord, hasPointerMoved, closest}  from '../../util/dom';
 import {NavController} from '../nav/nav-controller';
@@ -16,6 +17,7 @@ import {Platform} from '../../platform/platform';
 export class InputBase {
   protected _coord;
   protected _deregScroll;
+  protected _disabled: boolean = false;
   protected _keyboardHeight;
   protected _scrollMove: EventListener;
   protected _type: string = 'text';
@@ -136,6 +138,17 @@ export class InputBase {
     }
   }
 
+  @Input()
+  get disabled() {
+    return this._disabled;
+  }
+
+  set disabled(val) {
+    this._disabled = isTrueProperty(val);
+    this._item && this._item.setCssClass('item-input-disabled', this._disabled);
+    this._native && this._native.isDisabled(this._disabled);
+  }
+
   /**
    * @private
    */
@@ -161,6 +174,7 @@ export class InputBase {
     });
 
     this.checkHasValue(nativeInput.getValue());
+    this.disabled = this._disabled;
   }
 
   /**
diff --git a/ionic/components/input/input.scss b/ionic/components/input/input.scss
index 9830b52453..e41563a460 100644
--- a/ionic/components/input/input.scss
+++ b/ionic/components/input/input.scss
@@ -38,6 +38,10 @@ textarea.text-input {
   display: block;
 }
 
+.text-input[disabled] {
+  opacity: 0.4;
+}
+
 
 input.text-input:-webkit-autofill {
   background-color: transparent;
diff --git a/ionic/components/input/native-input.ts b/ionic/components/input/native-input.ts
index ebfd835ed0..deed803b0b 100644
--- a/ionic/components/input/native-input.ts
+++ b/ionic/components/input/native-input.ts
@@ -51,6 +51,10 @@ export class NativeInput {
     this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-labelledby', val);
   }
 
+  isDisabled(val: boolean) {
+    this._renderer.setElementAttribute(this._elementRef.nativeElement, 'disabled', val ? '' : null);
+  }
+
   /**
    * @private
    */
diff --git a/ionic/components/input/test/form-inputs/index.ts b/ionic/components/input/test/form-inputs/index.ts
index 879c86f309..0a4f0fd1e2 100644
--- a/ionic/components/input/test/form-inputs/index.ts
+++ b/ionic/components/input/test/form-inputs/index.ts
@@ -32,4 +32,8 @@ class E2EApp {
     this.submitted = true;
   }
 
+  disable() {
+    this.isTextAreaDisabled = !this.isTextAreaDisabled;
+  }
+
 }
diff --git a/ionic/components/input/test/form-inputs/main.html b/ionic/components/input/test/form-inputs/main.html
index 00412f55bf..4d4ae2ec2b 100644
--- a/ionic/components/input/test/form-inputs/main.html
+++ b/ionic/components/input/test/form-inputs/main.html
@@ -89,4 +89,18 @@
 
   <ion-input placeholder="Stand-alone textarea"></ion-input>
 
+  <ion-list>
+    <ion-item>
+      <ion-label>Disabled Input</ion-label>
+      <ion-input disabled value="Value"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Disabled TextArea</ion-label>
+      <ion-textarea [disabled]="isTextAreaDisabled" value="Value"></ion-textarea>
+    </ion-item>
+  </ion-list>
+
+  <button (click)="disable()">Disable</button>
+
 </ion-content>