jquery mobile selectmenu not working in chrome

Question

I have a jquery-mobile selectmenu that has previously worked fine in both Safari and Chrome, but just recently the selectmenu won't select the option choice. It still works fine in Safari. When using development tools either from an emulator or chrome on my desktop, I get no errors. I do have an issue with glyphicons-halflings-regular.woff2 not loading and I have tried all of the suggestions found here on stack, but none of those seem to work and most all research I've done comes up with answers that are >4 yrs old.

I'm using jquery mobile 1.4.5 and bootstrap 3.3.6 and the application resides on Azure.

Here's what I've got right now...

<div class="ui-field-contain" id="regionDiv">
     <label for="region">Region:</label>
     <select class="text-left" name="select-region" id="region" data-native-menu="false" data-mini="true" onchange="changeRegion();"></select>
</div>

<div class="ui-field-contain">
     <label for="projectmob">Project:</label>
     <select class="text-left" name="select-proj" id="projectmob" data-native-menu="false" data-mini="true" onchange="dwmChange();"></select>
</div>

Both the region and the project selectmenus do not select the item, they just leave a blank box or won't let you select the item.

The .js that runs when selected (I think it is fine)...

function changeRegion() 
{
    var regid = Number($("#region").val());
    var projsel = $("#projectmob");
    projsel.empty();
    projsel.append("<option id='selproj' value='placeholder' data-placeholder='true'>Select Project...</option>");
    var projNumber = 0;
    var projValue = -1;

    for (var i = 0; i < proj.length; i++) {
        if (proj[i].region == regid) {
            projNumber++;
            projsel.append("<option id='oc1-" + proj[i].id + "' value='" + proj[i].id + "'>" + proj[i].wono + ': ' + proj[i].name + "</option>");
            projValue = proj[i].id;
        };
    };

    $("#projectmob").selectmenu('refresh', true);
    if (projNumber == 1) {
        $("#projectmob").val(projValue).selectmenu('refresh');
    };

    getFilteredEvents();
}

function dwmChange()
{
    var projid = Number($("#projectmob").val());
    if (projid > 0) {
        getFilteredEvents();
        var regValue = findRegion(projid);
        $("#region").val(regValue).selectmenu('refresh');
    };
}

getFilteredEvents(); hits the azure sql database and sets up the screen with the data retrieved.

This all ran fine up until about a week ago as far as I know. I have made changes and updates, but none that I think should affect the selectmenus from working.

Any thoughts or ideas would be appreciated.

Thanks

Answer 1

It seems a problem with Chrome 50.0.2661.89.

Looking further into this...

I have to question the logic behind JQuery Mobile hiding the toolbars on select >element focus by default. The native browser select elements overlay the page in >their various special ways, and even the non-native select popup (which you get >when specify the data attribute data-native-menu="false" in html or nativeMenu: >false in the selectmenu options) is absolutely positioned as a dialog. This >means that the toolbars really do not intrude on the real-estate given to the >selectmenu options as they'll always overlay everything including the toolbars. >To me, this makes the code from line 12664 - 12692 commented as: this hides the >toolbars on a keyboard pop to give more screen room rather unnecessary for >select elements.

Workaround/solution: thankfully jQuery-Mobile does nicely allow you to override >this setting in your header/footer with the data-attribute data-hide-during->focus - simply set this to:

data-hide-during-focus="input, textarea"

and it won't try to hide the toolbars anymore when a select element gets focus." From https://github.com/jquery/jquery-mobile/issues/8429