Остановить Vuejs html select element, заставляя окно прокручивать выделенный элемент вне поля зрения

Question

У меня есть приложение Vue с простым элементом html <select>, размер которого показывает количество динамически загружаемых элементов.

<select id="my-list" v-if="my-list.length > 0" @focus="this.handleFocus" v-model="selectedItem" size="17" border="0" click="do_select">
      <option v-for="(option, index) in myList" :key="option.value" v-bind:value="{number: option.number, text: option.text, index: index}">
        {{ option.text }}
      </option>
</select>
...
<script>
...
   handleFocus(e) {
       e.preventDefault(); // sadly, doesn't work to stop the window scrolling
       window.scrollTo(this.lastX, this.lastY)
   },
   onScroll(e) {
       // plus logic to not set this when it was done after the select's focus event. 
       this.lastX = window.xOffset;
       this.lastY = window.yOffset;
   }
</script>

Моя проблема в том, что пользователь выбирает элемент в длинном списке, поведение выбора по умолчанию прокручивает окно, так что виден нижний край выбора, что

1. приводит к тому, что выбранный элемент выталкивается из поля зрения (!!), или
2. вызывает переключение поля выбора, так что элемент, выбранный пользователем, больше не находится в том же месте, и это просто ужасно UX

Это поведение по умолчанию, но я не смогнайдите что-то, что препятствует этому.

Единственное найденное мной решение, которое работает до сих пор, - это магблинг вокруг window.yOffset, когда события select и select происходят в select.

Чего мне не хватает?Такое ощущение, что должен быть способ сделать e.preventDefault() ??