From 5f2fdfdd07d2cfcfa03113a4f94b302a13a6909e Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@gmail.com>
Date: Fri, 9 May 2014 12:05:44 -0500
Subject: [PATCH] fix(textarea): Allow scroll in textarea when focused

Closes #1280
---
 js/utils/keyboard.js         |   4 +-
 js/views/scrollView.js       |   3 +-
 scss/_form.scss              |   2 +-
 test/css/input-textarea.html |   4 +-
 test/html/input.html         | 147 +++++++++++++++++++----------------
 5 files changed, 88 insertions(+), 72 deletions(-)

diff --git a/js/utils/keyboard.js b/js/utils/keyboard.js
index 77bc79ee3b5..fac100d30d8 100644
--- a/js/utils/keyboard.js
+++ b/js/utils/keyboard.js
@@ -161,7 +161,9 @@ function keyboardOnKeyDown(e) {
 }
 
 function keyboardPreventDefault(e) {
-  e.preventDefault();
+  if( e.target.tagName !== 'TEXTAREA' ) {
+    e.preventDefault();
+  }
 }
 
 function keyboardOrientationChange() {
diff --git a/js/views/scrollView.js b/js/views/scrollView.js
index 6c61d3a1ec2..211345713c3 100644
--- a/js/views/scrollView.js
+++ b/js/views/scrollView.js
@@ -696,7 +696,8 @@ ionic.views.Scroll = ionic.views.View.inherit({
     };
 
     self.touchMove = function(e) {
-      if(e.defaultPrevented) {
+      if(e.defaultPrevented ||
+        (e.target.tagName === 'TEXTAREA' && e.target.parentElement.querySelector(':focus')) ) {
         return;
       }
 
diff --git a/scss/_form.scss b/scss/_form.scss
index 427846bed3c..159af6e70bf 100644
--- a/scss/_form.scss
+++ b/scss/_form.scss
@@ -146,12 +146,12 @@ textarea {
 .item-stacked-label textarea
 {
   @include border-radius(2px);
-  overflow: hidden;
   padding: 4px 8px 3px;
   border: none;
   background-color: $input-bg;
 }
 .item-stacked-label input {
+  overflow: hidden;
   height: $line-height-computed + $font-size-base + 12px;
 }
 
diff --git a/test/css/input-textarea.html b/test/css/input-textarea.html
index 1c36d0734fe..2624c9e609f 100644
--- a/test/css/input-textarea.html
+++ b/test/css/input-textarea.html
@@ -94,7 +94,7 @@ <h3>Label left of input, No Parent Content Padding</h3>
         <label class="item item-input">
           <i class="icon ion-email"></i>
           <span class="input-label">Email</span>
-          <input type="email" placeholder="your@email.com">
+          <textarea placeholder="your@email.com"></textarea>
         </label>
       </div>
 
@@ -193,7 +193,7 @@ <h3>Default Textarea, No Parent Content Padding</h3>
       <div class="list">
         <label class="item item-input">
           <i class="icon ion-search placeholder-icon"></i>
-          <input type="search" placeholder="Search">
+          <textarea placeholder="Favorites"></textarea>
         </label>
       </div>
 
diff --git a/test/html/input.html b/test/html/input.html
index 6a30a70fca1..0417b418d6c 100644
--- a/test/html/input.html
+++ b/test/html/input.html
@@ -68,100 +68,113 @@
         <form ng-submit="formSubmit()">
 
         <div class="list">
+
+          <label class="item item-input item-stacked-label">
+            <span class="input-label">Email</span>
+            <textarea>
+                          Line 1
+                          Line 2
+                          Line 3
+                          Line 4
+                          Line 5
+            </textarea>
+          </label>
+
           <label class="item item-input">
             <span class="input-label">Your Name</span>
             <input type="text" value="name input" id="name">
           </label>
+
           <div class="item item-checkbox">
             <span class="input-label">Remember me</span>
             <label class="checkbox">
                 <input type="checkbox" id="remember-me">
             </label>
           </div>
-        </div>
 
-        <label class="item item-input">
-          <span class="input-label">From 1</span>
-          <input type="text" value="from input" id="from1">
-        </label>
+          <label class="item item-input">
+            <span class="input-label">From 1</span>
+            <input type="text" value="from input" id="from1">
+          </label>
 
-        <label class="item item-input">
-          <span class="input-label">To 1</span>
-          <input type="text" value="to input" id="to1">
-        </label>
+          <label class="item item-input">
+            <span class="input-label">To 1</span>
+            <input type="text" value="to input" id="to1">
+          </label>
 
-        <label class="item item-input item-stacked-label">
-          <span class="input-label">Comment 1</span>
-          <textarea id="textarea" id="comment1">comment textarea</textarea>
-        </label>
+          <label class="item item-input item-stacked-label">
+            <span class="input-label">Comment 1</span>
+            <textarea id="textarea" id="comment1">comment textarea</textarea>
+          </label>
 
-        <label class="item item-input">
-          <span class="input-label">From 2</span>
-          <input type="text" value="" id="from2">
-        </label>
+          <label class="item item-input">
+            <span class="input-label">From 2</span>
+            <input type="text" value="" id="from2">
+          </label>
 
-        <label class="item item-input">
-          <span class="input-label">To 2</span>
-          <input type="text" value="" id="to2">
-        </label>
+          <label class="item item-input">
+            <span class="input-label">To 2</span>
+            <input type="text" value="" id="to2">
+          </label>
 
-        <label class="item item-input item-stacked-label">
-          <span class="input-label">Comment 2</span>
-          <textarea id="textarea" id="comment2"></textarea>
-        </label>
+          <label class="item item-input item-stacked-label">
+            <span class="input-label">Comment 2</span>
+            <textarea id="textarea" id="comment2"></textarea>
+          </label>
 
-        <label class="item item-input">
-          <span class="input-label">From 3</span>
-          <input type="text" value="">
-        </label>
+          <label class="item item-input">
+            <span class="input-label">From 3</span>
+            <input type="text" value="">
+          </label>
 
-        <label class="item item-input">
-          <span class="input-label">To 3</span>
-          <input type="text" value="">
-        </label>
+          <label class="item item-input">
+            <span class="input-label">To 3</span>
+            <input type="text" value="">
+          </label>
 
-        <label class="item item-input item-stacked-label">
-          <span class="input-label">Comment 3</span>
-          <textarea id="textarea"></textarea>
-        </label>
+          <label class="item item-input item-stacked-label">
+            <span class="input-label">Comment 3</span>
+            <textarea id="textarea"></textarea>
+          </label>
 
-        <label class="item item-input">
-          <span class="input-label">From 4</span>
-          <input type="text" value="">
-        </label>
+          <label class="item item-input">
+            <span class="input-label">From 4</span>
+            <input type="text" value="">
+          </label>
 
-        <label class="item item-input">
-          <span class="input-label">To 4</span>
-          <input type="text" value="">
-        </label>
+          <label class="item item-input">
+            <span class="input-label">To 4</span>
+            <input type="text" value="">
+          </label>
 
-        <label class="item item-input item-stacked-label">
-          <span class="input-label">Comment 4</span>
-          <textarea id="textarea"></textarea>
-        </label>
+          <label class="item item-input item-stacked-label">
+            <span class="input-label">Comment 4</span>
+            <textarea id="textarea"></textarea>
+          </label>
 
-        <label class="item item-input">
-          <span class="input-label">From 5</span>
-          <input type="text" value="">
-        </label>
+          <label class="item item-input">
+            <span class="input-label">From 5</span>
+            <input type="text" value="">
+          </label>
 
-        <label class="item item-input">
-          <span class="input-label">To 5</span>
-          <input type="text" value="">
-        </label>
+          <label class="item item-input">
+            <span class="input-label">To 5</span>
+            <input type="text" value="">
+          </label>
 
-        <label class="item item-input item-stacked-label">
-          <span class="input-label">Comment 5</span>
-          <textarea id="textarea"></textarea>
-        </label>
+          <label class="item item-input item-stacked-label">
+            <span class="input-label">Comment 5</span>
+            <textarea id="textarea"></textarea>
+          </label>
 
-        <button type="button" class="button button-block button-energized" ng-click="openModal()">
-          Open Modal
-        </button>
+          <button type="button" class="button button-block button-energized" ng-click="openModal()">
+            Open Modal
+          </button>
 
-        <button type="submit" class="button button-block button-calm">
-          Submit!
-        </button>
+          <button type="submit" class="button button-block button-calm">
+            Submit!
+          </button>
+        </div>
 
         </form>