fix(typeahead): update inputs value on mapping where label is not derived from the model

Closes #180

Author: pkozlowski-opensource

src/typeahead/test/typeahead.spec.js

@@ -260,7 +260,6 @@ describe('typeahead tests', function () {
         var matchHighlight = findMatches(element).find('a').html();
         expect(matchHighlight).toEqual('prefix<strong>fo</strong>o');
       });
-
     });
 
     describe('selecting a match', function () {
@@ -303,6 +302,20 @@ describe('typeahead tests', function () {
         expect($scope.result).toEqual('baz');
         expect(inputEl.val()).toEqual('baz');
       });
+
+      it('should correctly update inputs value on mapping where label is not derived from the model', function () {
+
+        $scope.states = [{code: 'AL', name: 'Alaska'}, {code: 'CL', name: 'California'}];
+
+        var element = prepareInputEl("<div><input ng-model='result' typeahead='state.code as state.name for state in states | filter:$viewValue'></div>");
+        var inputEl = findInput(element);
+
+        changeInputValueTo(element, 'Alas');
+        triggerKeyDown(element, 13);
+
+        expect($scope.result).toEqual('AL');
+        expect(inputEl.val()).toEqual('Alaska');
+      });
     });
 
   });

src/typeahead/typeahead.js

@@ -100,7 +100,6 @@ angular.module('ui.bootstrap.typeahead', [])
 
         resetMatches();
         if (selected) {
-          selected = undefined;
           return inputValue;
         } else {
           if (inputValue && inputValue.length >= minSearch) {
@@ -111,21 +110,19 @@ angular.module('ui.bootstrap.typeahead', [])
         return undefined;
       });
 
-      modelCtrl.$render = function() {
+      modelCtrl.$render = function () {
         var locals = {};
-        if (modelCtrl.$viewValue) {
-          locals[parserResult.itemName] = modelCtrl.$viewValue;
-          element.val(parserResult.viewMapper(scope, locals));
-        }
+        locals[parserResult.itemName] = selected;
+        element.val(parserResult.viewMapper(scope, locals) || modelCtrl.$viewValue);
+        selected = undefined;
       };
 
       scope.select = function (activeIdx) {
         //called from within the $digest() cycle
         var locals = {};
-        locals[parserResult.itemName] = scope.matches[activeIdx].model;
+        locals[parserResult.itemName] = selected = scope.matches[activeIdx].model;
 
-        selected = parserResult.modelMapper(scope, locals);
-        modelCtrl.$setViewValue(selected);
+        modelCtrl.$setViewValue(parserResult.modelMapper(scope, locals));
         modelCtrl.$render();
       };