iPhone - JavaScript Dispatch Event - My Select Menu will not open on a setTimeout function

Question

Please open the these examples on your iPhone.

The below code is the correct behavior.

<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 a 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 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:

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/

Cheers!

Looks like everything is kinda working just fine. The timer thing is working (at least with chrome). About the strange behavior with native left right arrows, this might just be a focus thing. You dispatch the click and mouseevent but maybe you should trigger the focus on the selMenu as well — Bene, Oct 02 '15 at 13:42
Try it on Safari (iPhone). The browser and emulator work fine. I have tried adding a focus and have had no luck. You can achieve the same behaviour if you add a tabindex and use the code $('#selectMenu').trigger('focus'); This means it is not related to the focus event. I have also added an extra dispatchEvent for this and had no luck :( — Paddy, Oct 02 '15 at 14:04
Oups, my mistake I went straight up in the code and forgot the whole "iPhone" part. — Bene, Oct 02 '15 at 16:58
Hey I don't think this is possible to do. Your example does not work in FF either. Here is basically a duplicate of this - http://stackoverflow.com/questions/249192/how-can-you-programmatically-tell-an-html-select-to-drop-down-for-example-due - where it says that triggering the mousedown event is not possible on certain browsers. — jjbskir, Oct 13 '15 at 15:09

score 0 · Accepted Answer · edited May 23 '17 at 12:30

Well, this is all very odd. I think you've encountered an iOS bug with regard to timers. Here's a slightly different take on 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">

On non-mobile browsers and Android Chrome, this behaves as we might expect with both buttons causing the select to activate. On both iOS Safari and iOS Chrome, tapping the 'Delay' button causes the select to receive focus but nothing else happens.

I don't believe I have a very satisfactory explanation other than "bug"! I notice that here they seemed to have encountered something similar. I haven't tried the workaround suggested.

iPhone - JavaScript Dispatch Event - My Select Menu will not open on a setTimeout function

1 Answers1