滚动条关闭Internet Explorer中的下拉列表

Question

我正在开发一个平均堆栈应用程序，我正在使用以下指令创建一个下拉列表：

.directive('inputDropdown', function($compile) {

    var template = 
        '<input class="form-control" ng-model="ngModel">' +
        '<div class="dropdown">' + 
            '<div class="form-control" ng-repeat="value in list | filter:ngModel">' +
                '<div ng-mousedown="select($event, value)">{{value}}</div>' + 
            '</div>' +
        '</div>';

    return {
        restrict: 'EA',
        require: '^form',
        scope: {
            ngModel: '=',
            list: '=',
            onSelect: '&'
        },
        template: template,
        link: function(scope, element, attrs,mapController) {
            element.addClass('input-dropdown');
            scope.select = function(e, value) {
                scope.ngModel = value;
                scope.onSelect({$event: e, value: value});
                scope.makeFormDirty = mapController.$setDirty();
            };
        }
    };
})

然后在我的html中使用此指令：

<input-dropdown name="fqn" ng-model="modelVariables" list="variables"></input-dropdown>

此代码在chrome上运行得非常好但是当涉及到Internet Explorer（版本11）时，下拉按预期进行，但当我尝试单击下拉滚动条时，它会关闭它。我应该对此指令做什么更改，以便它不会关闭下拉菜单，用户应该能够使用滚动条滚动。