title: Dropdown selection hangs when we do change a dropdowns options in
body: <p>Dropdown selection hangs when we do change a dropdowns options in IE11 browser.</p>
  
  <p>However this works in other browsers. How to fix this, why this issue in IE11?</p>
  
  <p>Please click on the button below to see this issue!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;form&gt;
    &lt;select id="mySelect" size="8"&gt;
              &lt;option&gt;Orange&lt;/option&gt;
    &lt;/select&gt;
  &lt;/form&gt;
  &lt;br&gt;
  
  &lt;button type="button" onclick="myFunction()"&gt;Click&lt;/button&gt;
  
  &lt;script&gt;
  function myFunction() {
      var x = document.getElementById("mySelect").options;
      x[1]=new Option;
      x[1].text=x[0].text;
      x[1].value=x[0].value;
      x[0].text='sdf';
      x[0].value='sdf';
         }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/hL6LK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hL6LK.png" alt="enter image description here"></a></p>