Select2组选择。鼠标悬停在值上时，值自动转到顶部

Question

我从Select2 optgroup select遇到问题 here。当然，在我写这篇文章之前，我曾在那个话题上发表过评论，但是我没有任何答案。

HTML

<input type="hidden" id="fruitSelect" value="" style="width:300px;" /><br />
<br />
<button type="button" id="showValue">Show Value</button><br />
<br />
<div id="output">
</div>

JS

var FRUIT_GROUPS = [
    {
        id: '',
        text: 'Citrus',
        children: [
            { id: 'c1', text: 'Grapefruit' },
            { id: 'c2', text: 'Orange' },
            { id: 'c3', text: 'Lemon' },
            { id: 'c4', text: 'Lime' }
        ]
    },
    {
        id: '',
        text: 'Other',
        children: [
            { id: 'o1', text: 'Apple' },
            { id: 'o2', text: 'Mango' },
            { id: 'o3', text: 'Banana' }
        ]
    }
    ,
    {
        id: '',
        text: 'Other',
        children: [
            { id: 'o1', text: 'Apple' },
            { id: 'o2', text: 'Mango' },
            { id: 'o3', text: 'Banana' }
        ]
    },
    {
        id: '',
        text: 'Other2',
        children: [
            { id: 'o1', text: 'Apple2' },
            { id: 'o2', text: 'Mango2' },
            { id: 'o3', text: 'Banana2' }
        ]
    },
    {
        id: '',
        text: 'Other3',
        children: [
            { id: 'o1', text: 'Apple3' },
            { id: 'o2', text: 'Mango3' },
            { id: 'o3', text: 'Banana3' }
        ]
    },
    {
        id: '',
        text: 'Other4',
        children: [
            { id: 'o1', text: 'Apple4' },
            { id: 'o2', text: 'Mango4' },
            { id: 'o3', text: 'Banana4' }
        ]
    }

];

$('#fruitSelect').select2({
    multiple: true,
    placeholder: "Select fruits...",
    data: FRUIT_GROUPS,
    query: function(options) {
        var selectedIds = options.element.select2('val');
        var selectableGroups = $.map(this.data, function(group) {
            var areChildrenAllSelected = true;
            $.each(group.children, function(i, child) {
                if (selectedIds.indexOf(child.id) < 0) {
                    areChildrenAllSelected = false;
                    return false; // Short-circuit $.each()
                }
           });
            return !areChildrenAllSelected ? group : null;
        });
        options.callback({ results: selectableGroups });
    }
}).on('select2-selecting', function(e) {
    var $select = $(this);
    if (e.val == '') {
        e.preventDefault();
        $select.select2('data', $select.select2('data').concat(e.choice.children));
        $select.select2('close');
    }
});

$('#showValue').click(function() {
    $('#output').text($('#fruitSelect').val());
});

jsFiddle

我对此代码有疑问。例如，当我选择“ Mango3”时，滚动到列表的底部，只需将鼠标移到选择区域，然后滚动会自动向上。有什么解决办法吗？