fix(scroll): Fix input focus when tapped, do not scroll when target i…

…s an input, closes #1020
ionic-team · Apr 2, 2014 · 66ecec7 · 66ecec7
1 parent 7851009
commit 66ecec7
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 7 deletions.
diff --git a/js/ext/angular/test/input.html b/js/ext/angular/test/input.html
@@ -1,7 +1,7 @@
 <html ng-app="navTest">
   <head>
     <meta charset="utf-8">
-    <title>Checkbox</title>
+    <title>Inputs</title>
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
     <link rel="stylesheet" href="../../../../dist/css/ionic.css">
     <style>
@@ -24,7 +24,9 @@
           <input type="text" value="header input">
         </label>
       </header>
-      <ion-content class="has-header" padding="true" overflow-scroll="false">
+
+      <ion-content class="has-header padding">
+
         <div class="list">
           <label class="item item-input">
             <span class="input-label">Your Name</span>
@@ -53,6 +55,66 @@
           <textarea id="textarea">comment textarea</textarea>
         </label>
 
+        <label class="item item-input">
+          <span class="input-label">From</span>
+          <input type="text" value="">
+        </label>
+
+        <label class="item item-input">
+          <span class="input-label">To</span>
+          <input type="text" value="">
+        </label>
+
+        <label class="item item-input item-stacked-label">
+          <span class="input-label">Comment</span>
+          <textarea id="textarea"></textarea>
+        </label>
+
+        <label class="item item-input">
+          <span class="input-label">From</span>
+          <input type="text" value="">
+        </label>
+
+        <label class="item item-input">
+          <span class="input-label">To</span>
+          <input type="text" value="">
+        </label>
+
+        <label class="item item-input item-stacked-label">
+          <span class="input-label">Comment</span>
+          <textarea id="textarea"></textarea>
+        </label>
+
+        <label class="item item-input">
+          <span class="input-label">From</span>
+          <input type="text" value="">
+        </label>
+
+        <label class="item item-input">
+          <span class="input-label">To</span>
+          <input type="text" value="">
+        </label>
+
+        <label class="item item-input item-stacked-label">
+          <span class="input-label">Comment</span>
+          <textarea id="textarea"></textarea>
+        </label>
+
+        <label class="item item-input">
+          <span class="input-label">From</span>
+          <input type="text" value="">
+        </label>
+
+        <label class="item item-input">
+          <span class="input-label">To</span>
+          <input type="text" value="">
+        </label>
+
+        <label class="item item-input item-stacked-label">
+          <span class="input-label">Comment</span>
+          <textarea id="textarea"></textarea>
+        </label>
+
         <button class="button button-block button-energized" ng-click="openModal()">
           Open Modal
         </button>
@@ -98,7 +160,7 @@ <h1 class="title">New Contact</h1>
 
       var msgs = [];
       var timerId;
-      console.debug = function() {
+      console.debug2 = function() {
         var msg = [];
         for (var i = 0, j = arguments.length; i < j; i++){
           msg.push(arguments[i]);

diff --git a/js/utils/tap.js b/js/utils/tap.js
@@ -22,7 +22,10 @@
     ele.dispatchEvent(clickEvent);
 
     if(ele.tagName === 'INPUT' || ele.tagName === 'TEXTAREA') {
-      ele.focus();
+      if(ele.selectionStart === 0 && ele.selectionEnd === 0 && !isScrolledSinceStart(e)) {
+        ele.focus();
+        ele.setSelectionRange && ele.setSelectionRange(ele.value.length, ele.value.length);
+      }
       e.preventDefault();
     } else {
       blurActive();

diff --git a/js/views/scrollView.js b/js/views/scrollView.js
@@ -617,13 +617,11 @@ ionic.views.Scroll = ionic.views.View.inherit({
     });
 
     function shouldIgnorePress(e) {
-      // Don't react if initial down happens on a form element
-      return e.target.tagName.match(/object|embed/i) ||
+      return e.target.tagName.match(/input|textarea|select|object|embed/i) ||
              e.target.isContentEditable ||
              (e.target.dataset ? e.target.dataset.preventScroll : e.target.getAttribute('data-prevent-default') == 'true');
     }
 
-
     if ('ontouchstart' in window) {
 
       container.addEventListener("touchstart", function(e) {