JSFiddle - React, Tailwind, and code Playground

HTML

<select class="select-multiple-checkbox" multiple="multiple">
    <option>Opt</option>
    <option>Opt</option>
    <option>Opt</option>
    <option>Opt</option>
    <option>Opt</option>
    <option>Opt</option>
    <option>Opt</option>
    <option>Opt</option>
    <option>Opt</option>
    <option>Opt</option>
    <option>Opt</option>
    <option>Opt</option>
    <option>Opt</option>
    <option>Opt</option>
    <option>Opt</option>
    <option>Opt</option>
</select>

CSS

select {
  height: 100px;
  width: 100px;
  display: block;
}

JavaScript

$('.select-multiple-checkbox > option').mousedown(function(e) {
    e.preventDefault();
    var originalScrollTop = $(this).parent().scrollTop();
    console.log(originalScrollTop);
    $(this).prop('selected', $(this).prop('selected') ? false : true);
    var self = this;
    $(this).parent().focus();
    setTimeout(function() {
        $(self).parent().scrollTop(originalScrollTop);
    }, 0);
    
    return false;
});