fix(iOS): remove double tap bug on hrefs in suggestions

package.json

@@ -13,12 +13,12 @@
     "url": "https://github.com/algolia/autocomplete.js.git"
   },
   "devDependencies": {
-    "angular": "^1.6.2",
-    "angular-mocks": "^1.6.2",
-    "babel-eslint": "^7.0.0",
+    "angular": "^1.6.3",
+    "angular-mocks": "^1.6.3",
+    "babel-eslint": "^7.2.1",
     "chai": "^3.5.0",
     "colors": "^1.1.2",
-    "conventional-changelog-cli": "^1.2.0",
+    "conventional-changelog-cli": "^1.3.1",
     "doctoc": "^1.3.0",
     "eslint": "1.5.1",
     "eslint-config-airbnb": "0.1.0",
@@ -30,7 +30,7 @@
     "grunt-contrib-clean": "^1.0.0",
     "grunt-contrib-concat": "^1.0.1",
     "grunt-contrib-connect": "^1.0.2",
-    "grunt-contrib-uglify": "^2.1.0",
+    "grunt-contrib-uglify": "^2.2.0",
     "grunt-contrib-watch": "^1.0.0",
     "grunt-eslint": "^17.2.0",
     "grunt-exec": "^1.0.1",
@@ -41,20 +41,20 @@
     "istanbul-instrumenter-loader": "^1.0.0",
     "jasmine-core": "^2.5.2",
     "jasmine-jquery": "^2.1.1",
-    "jquery": "^3.1.0",
-    "json": "^9.0.4",
+    "jquery": "^3.2.1",
+    "json": "^9.0.6",
     "karma": "^1.5.0",
     "karma-chrome-launcher": "^2.0.0",
     "karma-coverage": "^1.1.1",
     "karma-coveralls": "^1.1.2",
-    "karma-firefox-launcher": "^1.0.0",
+    "karma-firefox-launcher": "^1.0.1",
     "karma-jasmine": "^1.0.2",
     "karma-opera-launcher": "^1.0.0",
-    "karma-phantomjs-launcher": "^1.0.2",
+    "karma-phantomjs-launcher": "^1.0.4",
     "karma-safari-launcher": "^1.0.0",
     "karma-sinon": "^1.0.5",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^2.0.2",
+    "karma-webpack": "^2.0.3",
     "mocha": "^3.0.2",
     "mversion": "^1.10.1",
     "node-static": "^0.7.8",

src/autocomplete/dropdown.js

@@ -45,9 +45,9 @@ function Dropdown(o) {
 
   var cssClass = _.className(this.cssClasses.prefix, this.cssClasses.suggestion);
   this.$menu = DOM.element(o.menu)
-    .on('click.aa', cssClass, onSuggestionClick)
     .on('mouseenter.aa', cssClass, onSuggestionMouseEnter)
-    .on('mouseleave.aa', cssClass, onSuggestionMouseLeave);
+    .on('mouseleave.aa', cssClass, onSuggestionMouseLeave)
+    .on('click.aa', cssClass, onSuggestionClick);
 
   this.$container = o.appendTo ? o.wrapper : this.$menu;
 
@@ -105,7 +105,17 @@ _.mixin(Dropdown.prototype, EventEmitter, {
       return;
     }
     this._removeCursor();
-    this._setCursor(elt, false);
+
+    // Fixes iOS double tap behaviour, by modifying the DOM right before the
+    // native href clicks happens, iOS will requires another tap to follow
+    // a suggestion that has an <a href> element inside
+    // https://www.google.com/search?q=ios+double+tap+bug+href
+    var suggestion = this;
+    setTimeout(function() {
+      // this exact line, when inside the main loop, will trigger a double tap bug
+      // on iOS devices
+      suggestion._setCursor(elt, false);
+    }, 0);
   },
 
   _onSuggestionMouseLeave: function onSuggestionMouseLeave($e) {

src/autocomplete/typeahead.js

@@ -558,7 +558,8 @@ function buildDom(options) {
       role: 'combobox',
       // Let the screen reader know the field has an autocomplete
       // feature to it.
-      'aria-autocomplete': (options.datasets && options.datasets[0] && options.datasets[0].displayKey ? 'both' : 'list'),
+      'aria-autocomplete': (options.datasets &&
+        options.datasets[0] && options.datasets[0].displayKey ? 'both' : 'list'),
       // Indicates whether the dropdown it controls is currently expanded or collapsed
       'aria-expanded': 'false',
       // If a placeholder is set, label this field with itself, which in this case,

test/unit/dropdown_spec.js

@@ -130,7 +130,7 @@ describe('Dropdown', function() {
   });
 
   describe('when mouseenter is triggered on a suggestion', function() {
-    it('should remove pre-existing cursor', function() {
+    it('should remove pre-existing cursor', function(done) {
       var $first;
       var $last;
 
@@ -140,20 +140,28 @@ describe('Dropdown', function() {
       $first.addClass('aa-cursor');
       $last.mouseenter();
 
-      expect($first).not.toHaveClass('aa-cursor');
-      expect($last).toHaveClass('aa-cursor');
+      // see implementation on why we need this setTimeout
+      setTimeout(function() {
+        expect($first).not.toHaveClass('aa-cursor');
+        expect($last).toHaveClass('aa-cursor');
+        done();
+      }, 0);
     });
 
-    it('should set the cursor', function() {
+    it('should set the cursor', function(done) {
       var $suggestion;
 
       $suggestion = this.$menu.find('.aa-suggestion').first();
       $suggestion.mouseenter();
 
-      expect($suggestion).toHaveClass('aa-cursor');
+      // see implementation on why we need this setTimeout
+      setTimeout(function() {
+        expect($suggestion).toHaveClass('aa-cursor');
+        done();
+      }, 0);
     });
 
-    it('should trigger cursorMoved', function() {
+    it('should trigger cursorMoved', function(done) {
       var spy;
       var $suggestion;
 
@@ -162,7 +170,10 @@ describe('Dropdown', function() {
       $suggestion = this.$menu.find('.aa-suggestion').first();
       $suggestion.mouseenter();
 
-      expect(spy).toHaveBeenCalled();
+      setTimeout(function() {
+        expect(spy).toHaveBeenCalled();
+        done();
+      }, 0);
     });
   });