When the validation state changes from invalid to valid, the current input field loses its focus on Firefox (Minimum working example in jsFiddle):
<div ng-repeat="elem in list track by $index"> <ng-form name='innerform'> <input name="id" type="number" ng-model="elem.id" required/> <div ng-if="innerform.id.$error.required">Required!</div> </ng-form> </div>
This behaviour seems to happen in Firefox only and only with an input field of type ‘number’. Change that to “text” or use Chrome and it works fine.
Am I doing something wrong here or is that a bug in AngularJS or FireFox?
This is a bug in Firefox when inserting a block into an inline element, not in AngularJS. A fix for upcoming FF versions is on the way already: https://bugzilla.mozilla.org/show_bug.cgi?id=1045270
Meanwhile a good workaround was proposed by caitp on https://github.com/angular/angular.js/issues/8365:
Add a style=”display: block;” or style=”display: inline-block;” (or just add these in a CSS file or style tag) for the affected elements (in the case of the original issue, ng-form) — or alternatively, use the ng-form attribute on a block element.