fix(click): event.preventDefault() when setting focus() on an input, …

…closes 583
ionic-team · Feb 13, 2014 · fc8ab4b · fc8ab4b
1 parent 6a962c2
commit fc8ab4b
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 13 deletions.
diff --git a/js/ext/angular/test/input.html b/js/ext/angular/test/input.html
@@ -2,32 +2,95 @@
   <head>
     <meta charset="utf-8">
     <title>Checkbox</title>
-
-    <!-- Sets initial viewport load and disables zooming  -->
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <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>
+      .dot {
+        position: absolute;
+        width: 3px;
+        height: 3px;
+        background-color: red;
+        z-index: 1000;
+        pointer-events: none;
+      }
+    </style>
   </head>
   <body>
 
-    <div>
-      <content has-header="true" class="reveal-animation">
+    <view id="view">
+      <content has-header="true" padding="true" overflow-scroll="false">
         <div class="list">
           <label class="item item-input">
-            <span class="input-label">First Name</span>
-            <input type="text" placeholder="John">
-          </label>
-          <label class="item item-input">
-            <span class="input-label">Last Name</span>
-            <input type="text" placeholder="Suhr">
+            <span class="input-label" ng-required>Your Name</span>
+            <input type="text" value="name">
           </label>
+          <a class="item item-checkbox no-arrow">
+            <span class="input-label">Remember me</span>
+            <label class="checkbox">
+                <input type="checkbox">
+            </label>
+          </a>
         </div>
+
+        <label class="item item-input">
+          <span class="input-label">From</span>
+          <input type="text" class="text-right" value="from">
+        </label>
+
+        <label class="item item-input">
+          <span class="input-label">To</span>
+          <input type="text" class="text-right" value="to">
+        </label>
+
+        <label class="item item-input  item-stacked-label">
+          <span class="input-label">Comment</span>
+          <textarea id="textarea">textarea</textarea>
+        </label>
+
+        <button class="button button-block button-energized">
+          Submit
+        </button>
       </content>
-    </div>
+    </view>
 
     <script src="../../../../dist/js/ionic.bundle.js"></script>
     <script>
       angular.module('navTest', ['ionic']);
 
+      var msgs = [];
+      var timerId;
+      console.debug = function() {
+        var msg = [];
+        for (var i = 0, j = arguments.length; i < j; i++){
+          msg.push(arguments[i]);
+        }
+        msg.push(getTime());
+
+        msgs.push(msg.join(', '));
+
+        clearTimeout(timerId);
+        timerId = setTimeout(function(){
+          document.getElementById('view').style.display = 'none';
+          document.writeln(msgs.join('<br>'));
+          console.debug = function(){};
+        }, 2000);
+      };
+
+      document.addEventListener('touchstart', function(e){
+        console.debug('touchstart');
+      });
+      document.addEventListener('touchstart', function(e){
+        console.debug('touchend');
+      });
+      document.addEventListener('click', function(event){
+        console.debug('click', 'clientX: ' + event.clientX, 'clientY: ' + event.clientY);
+      });
+
+      function getTime() {
+        var d = new Date();
+        return d.getSeconds() + '.' + d.getMilliseconds();
+      }
+
     </script>
   </body>
 </html>

diff --git a/js/utils/poly.js b/js/utils/poly.js
@@ -46,7 +46,8 @@
     ele.dispatchEvent(clickEvent);
 
     if(ele.tagName === 'INPUT' || ele.tagName === 'TEXTAREA' || ele.tagName === 'SELECT') {
-      ele.focus(); 
+      ele.focus();
+      e.preventDefault();
     } else {
       ele.blur();
     }