fix(typeahead): clear typeahead input when editable is false

Closes #1620 Closes #4265 Closes #4752
angular-ui · Oct 28, 2015 · 1d9294c · 1d9294c
1 parent 623e564
commit 1d9294c
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 0 deletions.
diff --git a/src/typeahead/test/typeahead.spec.js b/src/typeahead/test/typeahead.spec.js
@@ -259,6 +259,42 @@ describe('typeahead tests', function() {
       expect($scope.form.input.$error.editable).toBeFalsy();
     });
 
+    it('should clear view value after blur for typeahead-editable="false"', function () {
+        var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source | filter:$viewValue" typeahead-editable="false"></div>');
+        var inputEl = findInput(element);
+
+        changeInputValueTo(element, 'not in matches');
+        expect($scope.result).toEqual(undefined);
+        expect(inputEl.val()).toEqual('not in matches');
+        inputEl.blur(); // input loses focus
+        expect($scope.result).toEqual(undefined);
+        expect(inputEl.val()).toEqual('');
+    });
+
+    it('should clear view value when no value selected for typeahead-editable="false" typeahead-select-on-blur="false"', function () {
+        var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source | filter:$viewValue" typeahead-editable="false" typeahead-select-on-blur="false"></div>');
+        var inputEl = findInput(element);
+
+        changeInputValueTo(element, 'b');
+        expect($scope.result).toEqual(undefined);
+        expect(inputEl.val()).toEqual('b');
+        inputEl.blur(); // input loses focus
+        expect($scope.result).toEqual(undefined);
+        expect(inputEl.val()).toEqual('');
+    });
+
+    it('should not clear view value when there is match but no value selected for typeahead-editable="false" typeahead-select-on-blur="true"', function () {
+        var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source | filter:$viewValue" typeahead-editable="false" typeahead-select-on-blur="true"></div>');
+        var inputEl = findInput(element);
+
+        changeInputValueTo(element, 'b');
+        expect($scope.result).toEqual(undefined);
+        expect(inputEl.val()).toEqual('b');
+        inputEl.blur(); // input loses focus
+        expect($scope.result).toEqual('bar');
+        expect(inputEl.val()).toEqual('bar');
+    });
+
     it('should bind loading indicator expression', inject(function($timeout) {
       $scope.isLoading = false;
       $scope.loadMatches = function(viewValue) {

diff --git a/src/typeahead/typeahead.js b/src/typeahead/typeahead.js
@@ -336,6 +336,9 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position'])
           scope.select(scope.activeIdx);
         });
       }
+      if (!isEditable && modelCtrl.$error.editable) {
+          element.val('');
+      }
       hasFocus = false;
       selected = false;
     });