title: iPhone - JavaScript Dispatch Event - My Select Menu will not open on a setTimeout function
body: <p>Please open the these examples on your iPhone. </p>
  
  <p>The below code is the correct behavior.</p>
  
  <pre><code>&lt;select id="selectMenu"&gt;
      &lt;option value="1"&gt;1&lt;/option&gt;
      &lt;option value="2"&gt;2&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;input id="button" name="button" type="button" value="Click Me" /&gt;
  
  
  var initEvt = function (el, type) {
          var e = document.createEvent('MouseEvents');
          e.initEvent(type, true, true, window);
          el.dispatchEvent(e);
      },
      selMenu;
  
  selMenu = document.getElementById('selectMenu');
  
  document.getElementById('button').onclick = function () { 
      initEvt(selMenu, 'mouseover');
      initEvt(selMenu, 'mousedown');
      initEvt(selMenu, 'mouseup');
      initEvt(selMenu, 'click');   
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/ghwfstmj/">http://jsfiddle.net/ghwfstmj/</a></p>
  
  <p>If you add a setTimeout function it will not work.</p>
  
  <pre><code>&lt;select id="selectMenu"&gt;
      &lt;option value="1"&gt;1&lt;/option&gt;
      &lt;option value="2"&gt;2&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;input id="button" name="button" type="button" value="Click Me" /&gt;
  
  
  var initEvt = function (el, type) {
          var e = document.createEvent('MouseEvents');
          e.initEvent(type, true, true, window);
          el.dispatchEvent(e);
      },
      selMenu;
  
  selMenu = document.getElementById('selectMenu');
  
  document.getElementById('button').onclick = function () { 
      setTimeout(function () {
          initEvt(selMenu, 'mouseover');
          initEvt(selMenu, 'mousedown');
          initEvt(selMenu, 'mouseup');
          initEvt(selMenu, 'click');  
      }, 500);
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/ghwfstmj/1/">http://jsfiddle.net/ghwfstmj/1/</a></p>
  
  <p>Any idea why?</p>
  
  <p>I also see a strange scroll issue. If there are two select menus it will scroll down to the button and back up if you use the native (select options) left and right arrows. If you click done it does not do this or click on them manually:</p>
  
  <pre><code>select { 
      display: block; 
      width: 100%; 
  }
  #selectMenu { margin-bottom: 50px; }
  #selectMenu2 { margin-bottom: 200px; }
  
  &lt;select id="selectMenu"&gt;
      &lt;option value="1"&gt;1&lt;/option&gt;
      &lt;option value="2"&gt;2&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select id="selectMenu2"&gt;
      &lt;option value="1"&gt;1&lt;/option&gt;
      &lt;option value="2"&gt;2&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;input id="button" name="button" type="button" value="Click Me" /&gt;
  
  var initEvt = function (el, type) {
          var e = document.createEvent('MouseEvents');
          e.initEvent(type, true, true, window);
          el.dispatchEvent(e);
      },
      selMenu;
  
  selMenu = document.getElementById('selectMenu');
  
  document.getElementById('button').onclick = function () { 
          initEvt(selMenu, 'mouseover');
          initEvt(selMenu, 'mousedown');
          initEvt(selMenu, 'mouseup');
          initEvt(selMenu, 'click');  
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/ghwfstmj/4/">http://jsfiddle.net/ghwfstmj/4/</a></p>
  
  <p>Cheers!</p>