iPhone + jqueryUI Dialog

jQueryUI dialogはお手軽にdialog boxを表示させることができるが、妙な欠点もいくつかある。
その一つが、iphoneのブラウザでdialogを開いた時の挙動。

開いたダイアログの中にinputやselectタグが存在すると、自動的にフォーカスが合う。
そして、iOSの仕様でクソ使いにくいoption一覧をご親切にも勝手に出してくれるというわけである。

具体的には、こんな感じのコードが問題となる。 ex: https://jsfiddle.net/uoccz7La/

<!-- HTML部分 -->
<!-- iOSでこのダイアログを開くと意図した動作をしない -->
<div id="dialog" title="badtips">
    <p>select your favorite number.</p>
    <select id="selectitem"></select>
</div>

/* javascript部分 */
$(function(){
    $("#dialog").dialog({
        width: 450,
        open: function(){
            var add_html = "";
            for(var i=1; i <= 10; i++){
                add_html += "<option value=" + i + ">" + i + "</option>"
            }
            $("#selectitem").html(add_html);
        }
    })
})

これをiPhoneで開いてダイアログを開くと、以下の画像のような結果となる。
要はopen時に内容が足される前のselectを開いてしまっている。

これを回避するには、フォーカスがselectにあわないようにしてあげればよい。
すなわち、以下のような付け足しでOK。

<!-- HTML部分 -->
<div id="dialog" title="bettertips">
    <span class="ui-helper-hidden-accessible"><input type="image"/></span> <!-- dummy -->
    <p>select your favorite number.</p>
    <select id="selectitem"></select>
</div>