IPhone send event - JavaScript - my selection menu does not open in setTimeout function

Question

Please open these examples on your iPhone.

The following is the correct code.

<select id="selectMenu"> <option value="1">1</option> <option value="2">2</option> </select> <input id="button" name="button" type="button" value="Click Me" /> 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'); } 

http://jsfiddle.net/ghwfstmj/

If you add the setTimeout function, it will not work.

 <select id="selectMenu"> <option value="1">1</option> <option value="2">2</option> </select> <input id="button" name="button" type="button" value="Click Me" /> 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); } 

http://jsfiddle.net/ghwfstmj/1/

Any idea why?

I also see a weird scroll issue. If there are two selection menus, they will scroll down to the button and back up if you use your own (select options) left and right arrows. If you click the "Finish" button, this will not happen or click on them manually:

 select { display: block; width: 100%; } #selectMenu { margin-bottom: 50px; } #selectMenu2 { margin-bottom: 200px; } <select id="selectMenu"> <option value="1">1</option> <option value="2">2</option> </select> <select id="selectMenu2"> <option value="1">1</option> <option value="2">2</option> </select> <input id="button" name="button" type="button" value="Click Me" /> 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'); } 

http://jsfiddle.net/ghwfstmj/4/

Hooray!

Answer 1

Well, this is all very strange. I think you encountered an iOS bug regarding timers. Here is a little different from your example, which reproduces the problem:

 var raiseSelectMenu = function () { var eventOptions = { 'view': window, 'bubbles': true, 'cancelable': true }; var menu = document.getElementById('selectMenu'); menu.dispatchEvent(new MouseEvent('mousedown', eventOptions)); menu.dispatchEvent(new MouseEvent('mouseup', eventOptions)); }; var delayRaiseSelectMenu = function () { window.setTimeout(raiseSelectMenu, 0); }; document.getElementById('delay').onclick = delayRaiseSelectMenu; document.getElementById('nodelay').onclick = raiseSelectMenu; 

 <select id="selectMenu"> <option value="1">1</option> <option value="2">2</option> </select> <input id="delay" type="button" value="Delay"> <input id="nodelay" type="button" value="No Delay"> 

In non-mobile browsers and Android Chrome, this behaves as we can expect with both of the selection buttons. On both iOS Safari and iOS Chrome, pressing the Delay button forces the choice to receive focus, but nothing else happens.

I do not believe that I have a very satisfactory explanation other than a “mistake”! I noticed that here they seem to have run into something similar. I have not tried a workaround.