Tab Order in ui-select for angularjs

Question

I am fairly new to angularjs and am developing a web application with it. I am making use of the ui-select library for select2-style dropdowns. I have encountered what seems like a simple user experience problem with tab ordering.

I have built one of my forms with all the appropriate tabindex values. When I do just normal tabbing, everything works fine. However, on any of my dropdowns, if I type a few letters of a selection, which results in the nearest matching entry being selected, then hit the tab key, it does not advance to the next control like I would expect.

I am looking for ways to resolve this. I can't find anything in the documentation for ui-select that addresses this. While an appropriate directive would be preferred, I would be happy if there was even some way to set a custom event handler to accomplish the desired behavior.

My goal is to make this form work properly for somebody who is efficient with their keyboard and doesn't need to switch to the mouse unnecessarily. In my opinion, little interruptions like this make a big difference when inputting a lot of data.

My ui-select code is composed of the following:

<ui-select id="EntityMfgr" reset-search-input="true" theme="select2" class="form-control" tabindex="2"
        data-ng-model="$parent.Edit.ManufacturerId" ng-required="true">
  <ui-select-match placeholder="- Please Select -">{{ $select.selected.Name }}</ui-select-match>
  <ui-select-choices repeat="mfgr.Id as mfgr in Manufacturers | anyFilter: { Name: $select.search }">
    <div data-ng-bind-html="mfgr.Name | highlight: $select.search"></div>
  </ui-select-choices>
</ui-select>

So.... is this a bug? Is there a directive for it? Is there an event handler I can wire in? How can this be addressed?

Answer 1

simple by using autofocus attribute for ui-select

<ui-select autofocus id="EntityMfgr" reset-search-input="true" theme="select2" class="form-control" tabindex="2"
        data-ng-model="$parent.Edit.ManufacturerId" ng-required="true">
  <ui-select-match placeholder="- Please Select -">{{ $select.selected.Name }}</ui-select-match>
  <ui-select-choices repeat="mfgr.Id as mfgr in Manufacturers | anyFilter: { Name: $select.search }">
    <div data-ng-bind-html="mfgr.Name | highlight: $select.search"></div>
  </ui-select-choices>
</ui-select>

This autofocus will enable you to select the item which is first in the list.