Select2 scrolls to top

by finnegerd

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-theme@0.1.0-beta.10/dist/select2-bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.js"></script>
<div class="container body-content">
  <div class="form-group">
    <select class="js-example-basic-multiple form-control"></select>
  </div>
</div>

CSS

.body-content { 
  margin-top: 20px;
}

JavaScript

var data = [{"text":"Group 1","children":[{"id":"1","text":"Item 1"},{"id":"2","text":"Item 2"}]},{"text":"Group 2","children":[{"id":"3","text":"Item 3"},{"id":"4","text":"Item 4"}]},{"text":"Group 3","children":[{"id":"5","text":"Item 5"},{"id":"6","text":"Item 6"}]},{"text":"Group 4","children":[{"id":"7","text":"Item 7"},{"id":"8","text":"Item 8"}]},{"text":"Group 5","children":[{"id":"9","text":"Item 9"},{"id":"10","text":"Item 10"}]}];

var options = {
    data: data,
    placeholder: "Please select",
    multiple: true,
    allowClear: true,
    closeOnSelect: false,
    theme: "bootstrap"
};

$('.js-example-basic-multiple').select2(options);

// hide search field
$('.js-example-basic-multiple').on('select2:opening', function (e) {
    $('.select2-search__field').prop("readonly", true);
});

$('.js-example-basic-multiple').on('select2:selecting', function (e) {
  
    var selectedOption = e.params.args.data;    
    
    // disable options but selected
    $(this)
        .find('option')
        .each(function (i, option) {                        
            if ($(option).attr('value') != selectedOption.id)
                $(this).attr('disabled', true);                
        });
  
    // re-initialize select after disabling options
    $(this).select2({      
        placeholder: "Please select",
        multiple: true,
        allowClear: true,
        closeOnSelect: false,
        theme: "bootstrap"
    });
    
    // even select2 element open immediately, it doesn't scroll to the selected option
    //$(this).select2('open'); 
});