javascript - 选择隐藏的元素后 Tabindex 未使用正确的顺序

Question

JSBin here

Standalone

我有 3 个输入，tabindex 1、2 和 3。如果我将光标放在第一个(搜索)框和选项卡中，一切都会正常进行。

但是，如果我选择将鼠标移入搜索框然后点击选项卡时出现的覆盖/下拉元素之一，我将移至第三个 tabindex 输入。

我注意到的一件事是，在我在下拉列表中选择一个项目后，document.activeElement 变成了 body 元素。即使如此，我还是不明白为什么它会移动到第三个元素而不是按顺序移动到下一个元素。

Answer 1

只需将 tabindex="1" 添加到内部 div ( Standalone ):

var app = angular.module('binner', []);

app

.controller('MainCtrl', function() {

})


.directive('picker', function($document, $rootScope) {
    return {
        restrict: 'E',
        scope: {},
        template: 
          ['<input tabindex="1" ng-model="picker.current.name" ng-focus="picker.open($event)" required="required" ng-model="picker.searchText" ng-model-options="{debounce: 333}" placeholder="Search" autocomplete="off" />',
           '<div ng-show="picker.isOpen" class="overlay">',
               '<div tabindex="1" ng-click="picker.chooseItem(i)" ng-repeat="i in picker.items">{{i.name}}</div>',
           '</div>'].join(''),
        controller: PickerCtrl,
        controllerAs: 'picker',
        link: pickerLink,
    };

    function pickerLink(scope, iEl) {
        var picker = scope.picker;

        picker.open = openDropdown;
        picker.close = closeDropdown;

        //////////////////////////////////////////

        function openDropdown() {
            $document.bind('click', closeDropdown);
            picker.isOpen = true;
        }

        function closeDropdown(e) {
            if(e === undefined || !iEl[0].contains(e.target)) {
                $document.unbind('click', closeDropdown);
                picker.isOpen = false;

                if(!$rootScope.$$phase) {
                    scope.$digest();
                }
            }
        }
    }
});


function PickerCtrl() {
    this.items = [{name: 'first'}, {name: 'second'}, {name: 'third'}];

    this.chooseItem = function(item) {
      this.current = item;

      this.close();
    };
}

https://jsbin.com/bukolayuhe/1/edit?html,js,output