Why do <select multiple> boxes scroll to the top with preventDefault in Chrome

Question

Every time I add an event listner that somehow does a preventDefault on a change to the select-box, it scrolls to the top.

For a minimal example, see below:

document.getElementById('foo').onmousedown = function(e) {
  e.target.parentElement.focus();
  e.target.selected = !e.target.selected;
  e.preventDefault();
  return false;
}

<select multiple size="5" id="foo">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>

Steps to reproduce this weird behaviour is:

1. Click on option 2
2. Scroll down a bit
3. Click on any option-element

Your view should now have scrolled up to have option 2 at the very top.

This seems bizarre behaviour to me, which is really annoying.

Follow-up question to this: how can I stop this from happening? I'm trying to make a script that makes select multiple boxes behave as if the ctrl-key is always pressed (see https://stackoverflow.com/a/48217702/1256925) but that code doesn't work when the size is greater than the amount of options listed.

EDIT: I've tested it in MS Edge (I don't have Firefox on this PC), and it seems to handle this correctly, so this might be a Chrome-only bug. If so, my follow-up question remains: how do I prevent Chrome from doing this? (Also, could someone update me on whether this happens in FF as well?)

Answer 1

Try this workaround (it works atleast in Chrome):

document.getElementById('foo').onmousedown = function(e) {
  e.preventDefault();
  var st = this.scrollTop;
  e.target.selected = !e.target.selected;
  setTimeout(() => this.scrollTop = st, 0);
  this.focus();
}

document.getElementById('foo').onmousemove= function(e) {
    e.preventDefault();
}

<select multiple size="5" id="foo">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>