title: Stop multiple select from scrolling to top when selection changes
body: <p>I have a multi select list that i use to filter a grid with. When i select or deselect any item in the list, it triggers an event.</p>
  
  <p>The problem is that when i scroll down and select or deselect a value lower on the list, it jumps back to the top. How can i stop this from happening?</p>
  
  <p>I've made a fiddle: <a href="https://jsfiddle.net/Berge90/a2two97o/" rel="noreferrer">https://jsfiddle.net/Berge90/a2two97o/</a></p>
  
  <p>Edit: Problems in Chrome. Works fine in Edge and Firefox</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="FilterContainer"&gt;
      &lt;select id="SelectTenant" multiple="true"&gt;
      &lt;/select&gt;&lt;br/&gt;
      &lt;button onclick="setAllTenantSelections(true)"&gt;Select All&lt;/button&gt;
      &lt;button onclick="setAllTenantSelections(false)"&gt;Select None&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>window.onload = setupFilter;
  window.onload = populateTenantFilter;
  gridHeaders = [{name: "Test"},{name: "Value"},{name: "Another one"},{name: "And another"},{name: "Last one"}];
  
  //Selecting/Deselecting all values
  function setAllTenantSelections(selected) {
      var select = document.getElementById("SelectTenant");
      for (element in select.children) {
          select[element].selected = selected;
          showCol(select[element].text, selected);
      }
  }
  
  //Adding all values from array to list
  function populateTenantFilter() {
      var select = document.getElementById("SelectTenant");
      select.innerHTML = "";
      for (i = 0; i &lt; gridHeaders.length; i++) {
          var option = document.createElement("Option");
          option.innerHTML = gridHeaders[i].name;
          select.appendChild(option);
      }
      //setting all options as selected on load
      setAllTenantSelections(true);
      setupFilter();
  }
  
  //Adding onclick-events to the values
  function setupFilter() {
      $('select option').on('mousedown', function (e) {
          this.selected = !this.selected;
          if (this.selected) {
              console.log("SELECTED: " + this.text);
              showCol(this.text,true);
          } else {
              console.log("DESELECTED: " + this.text);
              showCol(this.text,false);
          }
          e.preventDefault();
      });
  }
  
  function showCol(){
          //Filtering grid based on selection
  }
  </code></pre>