JQuery Mobile w/ iPhone 5s & SE Form Select List Non-Native Render Error

[gs9999]

Aloha DrupalGap community,

I am currently working on a DrupalGap mobile app, and In my testing of certain custom forms, when instantiating a MULTIPLE SELECTION SELECT LIST, with NON-NATIVE select format, on iPhone 5s & SE (Small screen size), there is a render error. I opened an issue on the JQuery Mobile GitHub Support forums, and received the following reply regarding fixing it.

https://github.com/jquery/jquery-mobile/issues/8558

I was wondering how I would go about getting this fixed, as I want to make sure, (of course) that all iPhone users will have a good experience.

Thanks, Mahalo,

GS

[signalpoint]

@gs9999 I'd recommend attaching a pagecreate to your custom hook_menu() item, then in the pagecreate handler dynamically build the select list and inject it into the form. In your form builder turn your normal select list into a hidden field, then with your dynamic select list, when it changes have it populate the value of the hidden field, that way DrupalGap's form submit data assembly can grab those values. http://docs.drupalgap.org/7/Pages/Page_Events

[ntym4ek]

@signalpoint I did as you recommended. But injected on pagecreate select with data-native-menu: false behaves same as rendered form select element.

Common task is to open node add form with few taxonomy_term_reference field selects. I alter the form to set data-native-menu to false and get working fine in Chrome custom selectmenu with dialog as new page (as said in https://github.com/jquery/jquery-mobile/issues/8558). Clicking on option gets me back on form with item selected. But it does not work in compiled PhoneGap application for Android. I do get dialog popup with options, but after clicking on any or closing popup I get blank screen. When I open the DOM - there is no form at all, only region-content wrapper.

How should I try to get it work with data-native-menu: false?

[ntym4ek]

Looks like there are a lot of different issues on JQM selectmenu with dialog popup. After I found at http://api.jquerymobile.com/selectmenu/ this warning:

Note: The behavior whereby the custom select menu creates a new page when the list of options is long is deprecated as of jQuery Mobile 1.4.0. Starting with 1.5.0, the custom select menu will fall back to utilizing the select menu's native behavior when the list of options is too long.

I decided to stay on native menu. Thought, JQM select dialog popup with filter is extremely convenient at some cases. Any decision would be appreciated.