Merge pull request ftlabs#187 from ftlabs/issue-176

Trigger `click` event after synthesising a `focus` to be consistent with browser events and to fix issue ftlabs#176
mhuebert · Feb 22, 2014 · cbe4acf · cbe4acf
2 parents 2a044a3 + c6d20f3
commit cbe4acf
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 0 deletions.
diff --git a/lib/fastclick.js b/lib/fastclick.js
@@ -562,6 +562,7 @@ FastClick.prototype.onTouchEnd = function(event) {
  }
 
  this.focus(targetElement);
+ this.sendClick(targetElement, event);
 
  // Select elements need the event to go through on iOS 4, otherwise the selector menu won't open.
  if (!this.deviceIsIOS4 || targetTagName !== 'select') {

diff --git a/tests/176.html b/tests/176.html
@@ -0,0 +1,67 @@
+
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+ <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=0">
+ <title>fastclick</title>
+ <script src="../lib/fastclick.js"></script>
+ <style>
+
+ .page
+ {
+ padding: 50px;
+ font-size: 20px;
+ font-family: monospace;
+
+ /* for clickable layer */
+ height: 500px;
+ }
+
+ .input
+ {
+ font-size: 20px;
+
+ width: 100%;
+ height: 30px;
+ }
+
+ .button
+ {
+ text-align: center;
+ color: white;
+
+ margin-bottom: 20px;
+ padding: 10px;
+
+ background: #4a4d51;
+ }
+
+ </style>
+</head>
+<body class="page">
+
+ <div class="button">first, dye to blue!</div>
+ <input class="input" placeholder="then – focus here" id="ok">
+
+ <script>
+ (function(doc) {
+
+ function paint(color) {
+ doc.querySelector('.page').style.background = color;
+ };
+
+ function dye(e) { e.stopPropagation(); paint('#333'); }
+ function clean(e) { e.stopPropagation(); paint('#fff'); }
+
+ doc.querySelector('.button').addEventListener('click', dye);
+ doc.addEventListener('click', clean);
+
+ // fastclick initialization
+ FastClick.attach(doc.body);
+
+ })(document);
+ </script>
+</body>
+</html>
+