fix(input): remove click events from disabled inputs (#9676)

fixes #9070
ionic-team · Dec 19, 2016 · 21bd0a3 · 21bd0a3
1 parent 9b63d3e
commit 21bd0a3
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/src/components/input/input.scss b/src/components/input/input.scss
@@ -23,12 +23,12 @@ ion-textarea {
   width: 100%;
 }
 
-
 .item-input ion-input,
 .item-input ion-textarea {
   position: static;
 }
 
+
 // Textarea Within An Item
 // --------------------------------------------------
 
@@ -64,7 +64,6 @@ textarea.text-input {
   opacity: .4;
 }
 
-
 input.text-input:-webkit-autofill {
   background-color: transparent;
 }
@@ -81,6 +80,7 @@ input.text-input:-webkit-autofill {
 // This make it so the native input element is not clickable.
 // This will only show when the scroll assist is configured
 // otherwise the .input-cover will not be rendered at all
+// The input cover is not clickable when the input is disabled
 
 .input-cover {
   position: absolute;
@@ -91,6 +91,10 @@ input.text-input:-webkit-autofill {
   height: 100%;
 }
 
+ion-input[disabled] .input-cover {
+  pointer-events: none;
+}
+
 
 // Input Cover: Focused
 // --------------------------------------------------

diff --git a/src/components/input/test/input-focus/main.html b/src/components/input/test/input-focus/main.html
@@ -214,6 +214,11 @@
       <ion-input value="inline input 1"></ion-input>
     </ion-item>
 
+    <ion-item>
+      <ion-label>Disabled Input:</ion-label>
+      <ion-input disabled value="disabled input 1"></ion-input>
+    </ion-item>
+
   </ion-list>
 
 </ion-content>