[safari]select内のoptionに動的に設定したselected属性が表示に反映されない

2023年3月23日 2023年3月28日

moosan

検索ボタンを押すと、結果を非同期で表示するような一般的な絞り込み検索フォームで、

検索ボタンを押してもselectされた条件をselectedにされたままにする実装をしました。

しかし・・・Chromeでは期待通りに動いているけど、safariだとhtml上は期待するoption要素がきちんとselectedになっているにもかかわらず、

ブラウザの表示上は反映されないという事象に遭遇。

色々試しているうちに、タブ移動でfocusが当たると表示に反映されることに気付いたため、

コード上で動的にselect要素をfocusしようとしても上手くいかない。。。

最終的にはイベントでfocusを当ててあげると上手くいきました。

・一旦全てのoptionのselectedを外す

・期待のoption要素にselectedをつける

・イベント登録(onclickまたはtouchstartで)


document.eventForm.event_item.addEventListener("touchstart",document.eventForm.event_item.focus());

参考にさせていただいた記事はこちら。

safari特有の挙動っていうかバグ？？嫌いだ〜〜〜〜〜〜〜

Follow me!