Tab Bestellen in ui-select für angularjs

Question

Ich bin ziemlich neu bei angularjs und entwickle eine Webanwendung damit. Ich benutze die ui-select-Bibliothek für Select2-style-Dropdowns. Ich habe festgestellt, dass es sich bei der Tab-Bestellung um ein einfaches Problem mit der Benutzererfahrung handelt.

Ich habe eines meiner Formulare mit den entsprechenden Tabindex-Werten erstellt. Wenn ich nur normal tippe, funktioniert alles gut. Wenn ich jedoch in einige meiner Dropdown-Felder einige Buchstaben einer Auswahl eintippe, was dazu führt, dass der nächstgelegene übereinstimmende Eintrag ausgewählt wird, dann drücke die Tabulatortaste, es geht nicht wie erwartet zum nächsten Steuerelement.

ich nach Möglichkeiten suchen, dies zu lösen. Ich kann nichts in der Dokumentation für ui-select finden, die dies anspricht. Während eine entsprechende Direktive bevorzugt würde, würde ich mich freuen, wenn es sogar eine Möglichkeit gäbe, einen benutzerdefinierten Event-Handler zu setzen, um das gewünschte Verhalten zu erreichen.

Mein Ziel ist es, dieses Formular für jemanden, der effizient mit der Tastatur arbeitet und nicht unnötig zur Maus wechseln muss, richtig zu machen. Meiner Meinung nach machen kleine Unterbrechungen bei der Eingabe vieler Daten einen großen Unterschied.

Mein ui-Auswahlcode aus folgendem zusammen: So

<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> 

.... ist das ein Fehler? Gibt es eine Richtlinie dafür? Gibt es einen Event-Handler, den ich einbinden kann? Wie kann dies angegangen werden?

Answer 1

einfach durch autofocus Attribut für 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> 

Dieser Autofokus ermöglicht es Ihnen, um das Element auszuwählen, die zuerst in der Liste ist.