title: jQuery Mobile custom select menu works in Mobile Safari, but not in UIWebView
body: <p>I am using <code>jQuery Mobile</code> in an application that runs inside a <code>UIWebView</code>. The applicaiton is written in <code>Monotouch</code> and has multiple tabs and one of the tabs shows <code>html5</code> content within a webview. <code>jQuery Mobile</code> allows the <code>html5</code> content to have a consistent look and feel to the native sections of the application. I am trying to build functionality in <code>html5</code> that makes use of <code>jQuery Mobile</code> custom select menus, in other words, selects which have <code>data-native-menu</code> attribute set to <code>false</code>, and here I have encountered a strange problem. I have distilled the problem down to a simple example; here is the code:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div data-role="page" data-theme="b" id="forms"&gt;
          &lt;div data-role="content"&gt;
               &lt;select id="test" data-native-menu="false"&gt;
                   &lt;option value="abc"&gt;ABC&lt;/option&gt;
                   &lt;option value="def"&gt;DEF&lt;/option&gt;
                   &lt;option value="ghi"&gt;GHI&lt;/option&gt;
                   &lt;option value="jkl"&gt;JKL&lt;/option&gt;
                   &lt;option value="mno"&gt;MNO&lt;/option&gt;
                   &lt;option value="pqr"&gt;PQR&lt;/option&gt;
                   &lt;option value="abc1"&gt;ABC&lt;/option&gt;
                   &lt;option value="def1"&gt;DEF&lt;/option&gt;
                   &lt;option value="ghi1"&gt;GHI&lt;/option&gt;
                   &lt;option value="jkl1"&gt;JKL&lt;/option&gt;
                   &lt;option value="mno1"&gt;MNO&lt;/option&gt;
                   &lt;option value="pqr1"&gt;PQR&lt;/option&gt;
                   &lt;option value="abc2"&gt;ABC&lt;/option&gt;
                   &lt;option value="def2"&gt;DEF&lt;/option&gt;
                   &lt;option value="ghi2"&gt;GHI&lt;/option&gt;
                   &lt;option value="jkl2"&gt;JKL&lt;/option&gt;
                   &lt;option value="mno2"&gt;MNO&lt;/option&gt;
                   &lt;option value="pqr2"&gt;PQR&lt;/option&gt;
               &lt;/select&gt;
          &lt;/div&gt; &lt;!--content--&gt;
      &lt;/div&gt; &lt;!-- page--&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>When I run this code in <code>Firefox</code> or <code>Safari</code> it works fine. Also if I run it in <code>Mobile Safari</code> on an <code>iPad</code> it also works fine. But when I run this within the <code>UIWebView</code> in my application the popup only displays and closes correctly when there are a small number of items in the select and the overlay is shown. When, instead, the full screen popup is shown, it goes wrong when the popup is closed. So, for example, with the code that I pasted above, an overlay will be displayed if the select is clicked while the <code>iPad</code> is in <code>portrait mode</code>. But if I turn the <code>iPad</code> so the application is in <code>landscape mode</code> and click on the select, then there will be too many items for an overlay and a full screen popup will display instead. When I then try close this full screen popup, one of two things will happen:</p>
  
  <ul>
  <li><p>1) The very first time the page is loaded the popup will not close at all. It won't respond to any touch events at all.</p></li>
  <li><p>2) If I reload the page content in the webview and try again, now the whole <em>UIWebView</em> will disappear when I try close the popup. This scenario will occur on the second and every subsequent load of the page.</p></li>
  </ul>
  
  <p>The strange thing is, that when I run the application in debug mode, I do not see any exception being thrown when I try select an item from the popup or if I click on the <em>X</em> to close it. The webview just <em>disappears</em>. I can tell that the webview is gone, because my <code>UITabBarController</code> has a background image that shows on every tab, except on the tab where the <code>UIWebView</code> is, because the webview covers the background image on this tab. When I try close the popup then suddenly the background image is visible on an otherwise empty screen... meaning that the webview is now gone.</p>
  
  <p>I really need to be able to use custom select menus in my <code>html5</code> content, so am hoping that someone else has encountered this before and knows what is going on here. So, does anyone know what is causing this strange behaviour in <code>UIWebView</code> or know of a workaround for this issue? </p>
  
  <p>My <code>iPad</code> is running <code>iOS</code> version <code>5.0.1 (9A405)</code> and <code>jQuery Mobile</code> versions that I have tried are <code>alpha 4.1</code> and <code>1.1.0</code>. This same issue occurs in both these version of <code>jQuery Mobile</code>. Please let me know if other information regarding my <code>iPad</code> or development setup is needed.</p>
  
  <p>Update:</p>
  
  <p>Please ignore what I say above about the UIWebView disappearing. That is actually not happenning. In fact an exception is occurring in the webview and a redirect is occurring to an error html page embedded in the application package. This error screen has the same background image as on the <code>UITabBarController</code>, hence my jumping to the wrong conclusion. So, I know now that some exception is occurring in the webview, but it is still very much there! :) I will post an update when I know more.</p>
  
  <p>Update 2:</p>
  
  <p>I now know what is going wrong, although I do not quite know yet how to solve it. This is what is happening: when the popup is clicked, <code>jQuery Mobile</code> is adding <code>#&amp;ui-state=dialog</code> to the url. In other browsers this change is being reflected in the browsing history, so the popup is closed by means of a <code>back</code> being done on the browsing history. In the case of my UIWebView the change to the url is <strong>not</strong> being reflected in the history, so clicking close either does nothing (history is empty) or goes too far back (to a preload screen with just the background image that gets loaded before the actual content is loaded).</p>