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

我有3个带有

tabindex

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

但是，如果我选择一个覆盖/下拉元素，当我将鼠标移到搜索框中，然后点击tab时，我将移动到第三个tabindex输入

我注意到的一点是，

document.activeElement

在我从下拉列表中选择一个项目后，就变成了

body

元素。即使如此，我也不明白为什么它会按顺序移动到第三个元素而不是下一个元素。

只需将

tabindex=“1”

添加到内部div（）：

var-app=angular.module（'binner'，[]）；
应用程序
.controller（'MainCtrl'，function（）{
})
.directive（'picker'，function（$document，$rootScope）{
返回{
限制：'E'，
作用域：{}，
模板：
['',
'',
“{i.name}}”，
''。加入（''），
控制器：PickerCtrl，
控制器：“选择器”，
链接：pickerLink，
};
函数选择器链接（范围，iEl）{
var picker=scope.picker；
picker.open=openDropdown；
picker.close=关闭下拉菜单；
//////////////////////////////////////////
函数openDropdown（）{
$document.bind（'单击'，关闭下拉菜单）；
picker.isOpen=真；
}
功能关闭下拉列表（e）{
如果（e==未定义的| |！iEl[0]。包含（e.target））{
$document.unbind（'单击'，关闭下拉菜单）；
picker.isOpen=false；
如果（！$rootScope.$$phase）{
范围。$digest（）；
}
}
}
}
});
函数PickerCtrl（）{
this.items=[{name:'first'}，{name:'second'}，{name:'third'}]；
this.chooseItem=函数（项）{
此项=当前项；
这个。关闭（）；
};
}

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();
    };
}