fix(autocomplete): Fix suggestion selection on touch devices

Perform suggestion selection on mouse click instead of mouse enter so it works correctly on touch devices. Close #142
mbenford · Jul 7, 2014 · ef25a55 · ef25a55
1 parent 9714f8a
commit ef25a55
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/src/auto-complete.js b/src/auto-complete.js
@@ -136,6 +136,11 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, tagsInpu
 
             scope.suggestionList = suggestionList;
 
+            scope.addSuggestionByIndex = function(index) {
+                suggestionList.select(index);
+                scope.addSuggestion();
+            };
+
             scope.addSuggestion = function() {
                 var added = false;
 

diff --git a/templates/auto-complete.html b/templates/auto-complete.html
@@ -3,7 +3,7 @@
     <li class="suggestion-item"
         ng-repeat="item in suggestionList.items track by track(item)"
         ng-class="{selected: item == suggestionList.selected}"
-        ng-click="addSuggestion()"
+        ng-click="addSuggestionByIndex($index)"
         ng-mouseenter="suggestionList.select($index)"
         ng-bind-html="highlight(item)"></li>
   </ul>

diff --git a/test/auto-complete.spec.js b/test/auto-complete.spec.js
@@ -484,13 +484,13 @@ describe('autoComplete directive', function() {
 
             it('adds the selected suggestion when a mouse click is triggered', function() {
                 // Arrange
-                getSuggestion(1).mouseenter();
+                suggestionList.selected = null;
 
                 // Act
-                getSuggestion(1).click();
+                getSuggestion(0).click();
 
                 // Assert
-                expect(tagsInput.addTag).toHaveBeenCalledWith({ text: 'Item2' });
+                expect(tagsInput.addTag).toHaveBeenCalledWith({ text: 'Item1' });
             });
 
             it('focuses the input field when a suggestion is added via a mouse click', function() {