From 13c14af9a2716eadef074114d2af2417515a74c5 Mon Sep 17 00:00:00 2001
From: Wesley Cho <wesley.cho@gmail.com>
Date: Mon, 23 May 2016 08:23:48 -0700
Subject: [PATCH] fix(typeahead): change to select class

- Change to select `.uib-typeahead-match` class instead of the `li` tag

BREAKING CHANGE: This changes the selector used so that it doesn't select for the `li` tag specifically, but the elements with the class `uib-typeahead-match` - if using a custom template, this class needs to be added to the `li` element in the typeahead popup template.

Closes #5922
Fixes #5848
---
 src/typeahead/docs/readme.md            | 4 ++++
 src/typeahead/typeahead.js              | 4 ++--
 template/typeahead/typeahead-popup.html | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/typeahead/docs/readme.md b/src/typeahead/docs/readme.md
index 5ea5c36fd3..efd2dfd0fc 100644
--- a/src/typeahead/docs/readme.md
+++ b/src/typeahead/docs/readme.md
@@ -120,3 +120,7 @@ This directive works with promises, meaning you can retrieve matches using the `
   <small class="badge">$</small>
   <i class="glyphicon glyphicon-eye-open"></i> -
   Comprehension Angular expression (see [select directive](http://docs.angularjs.org/api/ng.directive:select)).
+
+**Notes**
+
+If a custom template for the popup is used, the wrapper selector used for the match items is the `uib-typeahead-match` class.
diff --git a/src/typeahead/typeahead.js b/src/typeahead/typeahead.js
index 5a43f9e21b..db33f5043e 100644
--- a/src/typeahead/typeahead.js
+++ b/src/typeahead/typeahead.js
@@ -402,13 +402,13 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.debounce', 'ui.bootstrap
         case 38: // up arrow
           scope.activeIdx = (scope.activeIdx > 0 ? scope.activeIdx : scope.matches.length) - 1;
           scope.$digest();
-          target = popUpEl.find('li')[scope.activeIdx];
+          target = popUpEl[0].querySelectorAll('.uib-typeahead-match')[scope.activeIdx];
           target.parentNode.scrollTop = target.offsetTop;
           break;
         case 40: // down arrow
           scope.activeIdx = (scope.activeIdx + 1) % scope.matches.length;
           scope.$digest();
-          target = popUpEl.find('li')[scope.activeIdx];
+          target = popUpEl[0].querySelectorAll('.uib-typeahead-match')[scope.activeIdx];
           target.parentNode.scrollTop = target.offsetTop;
           break;
         default:
diff --git a/template/typeahead/typeahead-popup.html b/template/typeahead/typeahead-popup.html
index 71232be972..64d79d23bc 100644
--- a/template/typeahead/typeahead-popup.html
+++ b/template/typeahead/typeahead-popup.html
@@ -1,5 +1,5 @@
 <ul class="dropdown-menu" ng-show="isOpen() && !moveInProgress" ng-style="{top: position().top+'px', left: position().left+'px'}" role="listbox" aria-hidden="{{!isOpen()}}">
-    <li ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index, $event)" role="option" id="{{::match.id}}">
+    <li class="uib-typeahead-match" ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index, $event)" role="option" id="{{::match.id}}">
         <div uib-typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
     </li>
 </ul>