Problem with select boxes with many options and data-native-menu="false"

opitzconsulting / jquery-mobile-angular-adapter

jquery mobile angular adapter

MIT License

517 stars 114 forks source link

Problem with select boxes with many options and data-native-menu="false" #199

Closed cpt-pete closed 11 years ago

cpt-pete commented 11 years ago

When you have a select box with many options and set data-native-menu="false" then custom menus should automatically enable and provide a 'modal window style' select box.

<select data-native-menu="false"  >
  <many options>...
</select>

See 'Option to use custom menus' http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-selects.html

This works for me with jquery-mobile-angular-adapter if the select is in the initial html template.

However, if the select is in an external html file then nothing happens when you click the select box.

I've created a Plunker to show what I mean: http://plnkr.co/edit/aDjnbF?p=preview

tbosch commented 11 years ago

Hi, thanks for reporting. I could reproduce the problem and will look into it soon.

Tobias

tbosch commented 11 years ago

Hi, this only happens if you redirect to an external page on startup. A workaround would be to put the first page in the index.html, and all other pages as external pages, like this: http://plnkr.co/edit/BcKI6X?p=preview

tbosch commented 11 years ago

Hi, so, there were two problems:

Your example contained a otherwise routing rule. This does not work with non native popups that show up as dialogs as jqm then changes the url to something like .../#uuid-5-dialog, to which then your otherwise rule applies and reroutes to an empty hash in the url, which closes the dialog instantly. The solution here is not to use otherwise but a specific routing rule.
There was a bug in the jqm adapter that would open the popup only on the second click. Fixed that with the last commit.

Tobias