Question

I’m using an html select element as an active menu. When you select an item from it, it does an action and then in some cases, a side effect of the action is resetting the value of the menu to something else.

function onMenuChangeHandler() {
    var menu = $('#menu');
    var menuChoice = menu.val();
    if (menuChoice == ...) {
        ...
        menu.blur(); // ensure change handler doesn't get fired again
        menu.val(OTHER_VALUE);  // **
    }
};

This works fine on the desktop in multiple browsers and works fine on iOS5. It inexplicably stopped working on iOS6. The result is that it acts as if the line marked ** above is not there.

It works fine in any case where I don’t set the value.

FYI: There’s another change in iOS6 which seems unrelated to this but mentioning it just in case. When the menu is selected, it now dismisses the picker immediately rather than leaving it open. This is how it works on every other platform. If you have more more than one select element, you still get the non-standard behavior.

Answer 1

I spent a lot of time trying to track this down and eventually discovered that the problem is that iOS6 sets the value of the control a second time after my change handler exits. If I put in alerts, I can clearly see that the control changes to the OTHER_VALUE (underneath the alert). Then when I dismiss the alert, the control reverts. (Without the alert, the change happens too fast to see.)

So here’s a workaround:

function onMenuChangeHandler() {
    var menu = $('#menu');
    var menuChoice = menu.val();
    if (menuChoice == ...) {
        ...
        setTimeout(function() {
                menu.blur(); // ensure change handler doesn't get fired again
                menu.val(OTHER_VALUE);
            }, 1);
    }
};

Maybe someone else has a better answer or a better explanation.