fix(typeahead): clear validity status within $apply on 'blur' event.

Closes angular-ui#6032
Siggen · Jun 20, 2016 · b1ca512 · b1ca512
1 parent 1ec0997
commit b1ca512
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 3 deletions.
diff --git a/src/typeahead/test/typeahead.spec.js b/src/typeahead/test/typeahead.spec.js
@@ -313,6 +313,39 @@ describe('typeahead tests', function() {
       expect($scope.form.input.$error.parse).toBeFalsy();
     });
 
+    // fix for #6032
+    it('should clear errors and refresh scope after blur for typeahead-editable="false"', function () {
+      var element = prepareInputEl(
+        '<div><form name="form" ng-class="{invalid : form.input.$invalid}">' +
+          '<input name="input" ng-model="result" uib-typeahead="item for item in source | filter:$viewValue" typeahead-editable="false">' +
+        '</form></div>');
+      var inputEl = findInput(element);
+
+      // first try
+      changeInputValueTo(element, 'not in matches');
+      expect($scope.result).toEqual(undefined);
+      expect(inputEl.val()).toEqual('not in matches');
+      expect(element.find('form')).toHaveClass('invalid');
+      inputEl.blur();
+
+      expect(inputEl.val()).toEqual('');  // <-- input is reset
+      expect($scope.form.input.$error.editable).toBeFalsy();
+      expect($scope.form.input.$error.parse).toBeFalsy();
+      expect(element.find('form')).not.toHaveClass('invalid');  // <-- form has no error (it always works for some reason)
+
+      // second try
+      changeInputValueTo(element, 'not in matches');
+      expect($scope.result).toEqual(undefined);
+      expect(inputEl.val()).toEqual('not in matches');
+      expect(element.find('form')).toHaveClass('invalid');
+      inputEl.blur();
+
+      expect(inputEl.val()).toEqual('');  // <-- input is reset
+      expect($scope.form.input.$error.editable).toBeFalsy();
+      expect($scope.form.input.$error.parse).toBeFalsy();
+      expect(element.find('form')).not.toHaveClass('invalid');  // <-- form has no error (it didn't work prior to #6032 fix)
+    });
+
     it('should go through other validators after blur for typeahead-editable="false"', function () {
         var element = prepareInputEl(
         '<div><form name="form">' +

diff --git a/src/typeahead/typeahead.js b/src/typeahead/typeahead.js
@@ -454,9 +454,11 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.debounce', 'ui.bootstrap
       }
       if (!isEditable && modelCtrl.$error.editable) {
         modelCtrl.$setViewValue();
-        // Reset validity as we are clearing
-        modelCtrl.$setValidity('editable', true);
-        modelCtrl.$setValidity('parse', true);
+        scope.$apply(function() {
+          // Reset validity as we are clearing
+          modelCtrl.$setValidity('editable', true);
+          modelCtrl.$setValidity('parse', true);
+        });
         element.val('');
       }
       hasFocus = false;