javascript - Tab-off ui-bootstrap typeahead only when row is explicitly selected -

i've created jsbin demonstrate issue i'm having. if go here, try type "five" , move on. natural reaction type "five" , press tab, , if wanted "five-hundred," you'd arrow-down once; however, in case, have type "five" , either press escape or physically mouse out of box without clicking of other options

so, basically, when you're using typeahead, if there @ least 1 matching result current criteria, pressing tab select it. expected behavior type, current selected option you're typing, , if want 1 of other results must down-arrow 1 or more times.

here code that's in jsbin:

<div ng-controller="testcontroller">   <div>     {{selected}}   </div>   <input type="text" ng-model="selected" typeahead="item item in typeaheadoptions | filter:$viewvalue"> </div> 

and javascript:

var app = angular.module('app', ['ui.bootstrap'])  .controller('testcontroller', function($scope) {   $scope.typeaheadoptions = [     'one','two','three','four','five-hundred','fifteen','fourteen','fifty','six','seven','eight','nine','ten'   ] }); 

i ended modifying ui-bootstrap work how want to.

i added mustmousedowntomatch property/attribute directive, like:

<input type="text" ng-model="selected" typeahead="item item in typeaheadoptions | filter:$viewvalue" typeahead-mouse-down-to-match="true"> 

and javascript:

var mustmousedowntomatch = originalscope.$eval(attrs.typeaheadmousedowntomatch) ? originalscope.$eval(attrs.typeaheadmousedowntomatch) : false; 

i added function put current text first item of typeahead list, , make selected item:

var setfirstresulttoviewvalue = function (inputvalue) {     scope.matches.splice(0, 0, {         id: 0,         label: inputvalue,         model: inputvalue     });      // set selected item first item in list, guy     scope.activeidx = 0; } 

and called in getmatchesasync call in typeahead directive:

var getmatchesasync = function(inputvalue) { // stuff     $q.when(parserresult.source(originalscope, locals)).then(function(matches) {         // stuff         if (matches.length > 0) {              // stuff         }         if (mustmousedowntomatch) {             setfirstresulttoviewvalue(inputvalue);         }         // stuff   };