Tabindex in AngularJS directive -

i have written directive produces table including rows. each row has drop-down list selection , normal text areas fill information. problem is, when hit tab key on keyboard, drop-down selections ignored , not focused. cursor jumps next text area. tried fix problem incremental tabindex attribute inside each column of rows, still no difference. each column of each row produced inside directive looping on array using ng-repeat. following produces drop-down:

<td><ng-select ng-model="onerow.xitem" ng-options="opt.name opt.name opt in selections.xitemlist| orderby:'name'" cs-option-init=""></ng-select></td> 

follwing produces text area focused pressing tab on keyboard.

  <td><ng-input ng-model="onerow.yitem" ></ng-input></td> 

please note produced inside directive not static html. picture depicts table. hitting tab key, cursor jumps next possible text area either in same row or next row.

not precisely sure behavior describing here. however, default html tab through formatted fields left-to-right before continuing next row.

tab allow user focus on "next " form field, however, once drop-down has focus, arrow-up/down keys used select option. once option selected, pressing tab again moves next form field.

if skipped, check html syntax.

even via angular, dom dom. if syntax form fields correct within table, process correctly using tabs.

non-anglar example because using angular should have 0 effect on tabbing if didn't force tabindex: https://codepen.io/karsunjason/pen/kqeoyg

<form> <table style="width:75%">   <tr>     <td><select id="tabledropdown-usengrepeatindexhere0"><option value="volvo">volvo</option><option value="saab">saab</option><option value="mercedes">mercedes</option><option value="audi">audi</option> </select></td>     <td><select id="tabledropdown-usengrepeatindexhere1"><option value="volvo">mr</option><option value="saab">mrs</option><option value="mercedes">sir</option><option value="audi">madame</option> </select></td>     <td><select id="tabledropdown-usengrepeatindexhere2"><option value="volvo">1</option><option value="saab">2</option><option value="mercedes">3</option><option value="audi">4</option> </select></td>     <td><input id="tabledropdown-usengrepeatindexhere4"></td>     <td><input id="tabledropdown-usengrepeatindexhere5"></td>     <td><select id="tabledropdown-usengrepeatindexhere6"><option value="volvo">5555</option><option value="saab">4444</option><option value="mercedes">3333</option><option value="audi">2222</option> </select></td>     <td><input id="tabledropdown-usengrepeatindexhere7"></td>   </tr><tr>     <td><select id="tabledropdown-usengrepeatindexhere8"><option value="volvo">volvo</option><option value="saab">saab</option><option value="mercedes">mercedes</option><option value="audi">audi</option> </select></td>     <td><select id="tabledropdown-usengrepeatindexhere9"><option value="volvo">mr</option><option value="saab">mrs</option><option value="mercedes">sir</option><option value="audi">madame</option> </select></td>     <td><select id="tabledropdown-usengrepeatindexhere10"><option value="volvo">1</option><option value="saab">2</option><option value="mercedes">3</option><option value="audi">4</option> </select></td>     <td><input id="tabledropdown-usengrepeatindexhere11"></td>     <td><input id="tabledropdown-usengrepeatindexhere12"></td>     <td><select id="tabledropdown-usengrepeatindexhere13"><option value="volvo">5555</option><option value="saab">4444</option><option value="mercedes">3333</option><option value="audi">2222</option> </select></td>     <td><input id="tabledropdown-usengrepeatindexhere14"></td>   </tr>  </table> </form> 

suggestions: 1) check form fields proper syntax. 2) either use tabindex="0" in each field (forces tab stop within natural order of page) or remove tabindex entirely.