Form rapidly tabs between form fields - html

Question

When editing a field I click off the window and it loses focus. Then when I click back into the window in a different field, the focus will rapidly tab between the two form fields.
This issue occurs occurs in Chrome, IE, and Firefox. The form fields are being pulled from a questionnaire json file for one part, but I have noticed it happening in the fields that aren't pulled from a questionnaire as well.
Below is a sample of the html and angular code that creates the form.
<ng-form name="personalForm">
<div layout="row" layout-align="center center" ng-repeat="section in sections" ng-show="currentSection >= $index+1" id="section_{{$index}}">
<md-list id="personalQnsList" layout="row" layout-align="start center" flex="90">
<!-- Questions Layout -->
<div layout="column" layout-align="start center" flex="100" role="listitem">
<div class="row sectionLine" layout="row" id='personal_{{$index}}' layout-align="start center" ng-repeat="personalQuestion in section.questions track by $index" ng-if="section.questions[$index-1].valid || $first" ng-class="{'animate-if':$index!=0}">
<div class="row" layout-align="start center" ng-class="{'ssn': personalQuestion.fieldType == 'ssn' }">
<!-- 3 is added to the index to account for the previous questions -->
<dynamic-question section-name="section.name" form-name="personalForm" question-index="$index + 3" question-model="personalQuestion" result-produced="resultProduced(result, personalQuestion.fieldType, personalQuestion.fieldMapping)"
layout-align="start center" layout-align-xs="center center"></dynamic-question>
</div>
<!-- <md-button class="info-icon" ng-if="personalQuestion.info"> <md-icon></md-icon>
<md-tooltip class="infoTooltip" md-direction="right"> {{personalQuestion.id |translate}}</md-tooltip> </md-button> -->
</div>
</div>
</md-list>
</div>
<div layout="column" layout-align="center center">
<md-button class="md-primary md-raised" ng-if="pCtrl.continueFlag" ng-click="pCtrl.reviewPersonalInformation()" aria-label="Continue">Continue</md-button>
<!-- <md-button class="md-primary md-raised" ng-if="pCtrl.continueFlag && pCtrl.profileContinue" ng-click="pCtrl.reviewPersonalInformation()" aria-label="Continue">Continue</md-button> -->
<div ng-show="pCtrl.errorMessageFlag" class="error_Msg text-center">There is an error with the information you provided. Please check your fields again</div>
<div ng-show="pCtrl.errorMessageFlag" class="error_Msg text-center">Please check {{pCtrl.missingFields}} fields again</div>
</div>
</ng-form>

Answer 1

Probably you have:
1) A Javascript "global" event (I'm 90% sure that it's a Jquery event) checking on every interaction a user has with your app elements.
2) This javascript event (maybe a .focus .click variation) is forcing to always focus one of the element (let's call it element "x"). That's why it's happening that when the user clicks on any another element (this element probably has a javascript event too with a focus instruction inside) different of element "x" the focus try to return back to the element "x"
3) Both focus instruction on the javascript "global" element are "fighting" each other to have the focus on the element they handle (event "x" to focus "x" for element "x" and event "n" to focus "n" for element "n" )
4) This javascript functions maybe are bounded to one or maybe more class names of your element
5) I'm specially curious about these two lines classes and posibly bounded javascript events:
<div class="row sectionLine" layout="row" id='personal_{{$index}}' layout-align="start center" ng-repeat="personalQuestion in section.questions track by $index" ng-if="section.questions[$index-1].valid || $first" ng-class="{'animate-if':$index!=0}">
<div class="row" layout-align="start center" ng-class="{'ssn': personalQuestion.fieldType == 'ssn' }">
To conclude: All I had mentioned above is the most common thing to happen and since you don't provide necessary code to let me test your app is the most accurate answer I can give you.