materializeを使ったformのselectタグで、iOS13だと正しく選択できない

materializeとは？

Googleが作ったWeb用のフロントエンドフレームワークです。
レスポンシブデザインに対応していて、BootStrapみたいな感じで使えるので使いやすいです。
何よりいいのが、Bootstrapみたいに使えるのにBootstrapっぽくないので「あ、こいつフロントエンドはお手軽に済ましたな！」みたいに思われにくく、作り込んだ感が出ます

iconも豊富でカラーバリエーションも多いので、作り込まれたサイト感が出しやすいです。
またフラットなデザインなので、UnDrawのイメージともなじみやすくよきです。
最近流行りの感じのサイトをお手軽に作ることができます。

Bootstrapから抜け出して次に行きたい！という人、ぜひmaterializeCSSを使いましょう。
日本語の情報がまだ少ないっぽいので、もっとやれるひとを増やしていきたいのです。

問題の詳細

さて、そんなすばらしいmaterializeですが、ちょっと不具合があったのです。
formのselectはおしゃれで使いやすいんですが、iOS13では正しく選択できません。
（正確にはiOS13のChromeで正しく動きませんでした、Safariはみていません）

materializeのselectタグは、JavaScriptで動かしているみたいなんですが、それに不具合があったようです。
githubのisueに問題が報告されています。
https://github.com/Dogfalo/materialize/issues/6444

解決方法

「じゃあどうすりゃいいんだよ！」ってなるとおもいますが、こちらの不具合はすでに修正されています。
ただリリースはされていないので、githubからソースをダウンロードして、js/select.jsだけを追加で読み込んでください。

手順

1. materializeCSSのソースを一式落とす。https://github.com/Dogfalo/materialize
2. 自分のプロジェクトの所定の場所に、js/selec.jsを移す。
3. 自分のプロジェクトで、materializeCSSを読み込んだあとに、select.jsを読み込む。

index.html

    <script type="text/javascript" src="{% static 'materialize/js/select.js'%}"></script>
    <script type="text/javascript" src="{% static 'user/js/user.js'%}"></script>

確認

iOS13で試してみる。ちゃんと選べる！かんぺき！

おわりに

たぶん次のリリースで修正されるとは思いますが、それまでは悩む人も多そうなので記事にしました。
繰り返しになりますがmaterializeCSSを使おう！そして日本語情報を増やしていきましょう！