Number input field loses focus on validation change

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?

Answer

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.

Leave a Reply

Your email address will not be published. Required fields are marked *