こんにちは。エンジニアの砂町です。
先日reactでwebアプリケーションを開発してる際、inputの挙動についてハマりました。
Webアプリケーションですがスマホで動かすことが前提となっていて、PCからは操作できないような仕様です。
本日はその内容について書きたいと思います。
※ブラウザの環境はLIFFなので通常のスマホで動かすWebアプリとは異なる点があるかもしれません。
※LIFFについては以前書いたこちらの記事をご参照ください。
背景
上記でも記載しましたが、スマホのブラウザでの挙動となります。
LIFFアプリ内で動かしているので、ブラウザについて断定はできないですがユーザーがデフォルトで使用しているブラウザが元で動いているように思いました。
（確認方法ご存知の方がいれば教えてください。。）
開発時、大枠は通常のWebアプリケーション開発のようにPCのGoogle Chromeで行なっており、実機で動かそうとLIFFブラウザで操作した時に事件が起こりました。
Input type=“date”で選択した日時が反映されない、、
onChangeで変更時に値を取得しstateに反映する動きにしていたのですが、反映されないのです。
PCのGoogle Chromeで開発してた時は反映していたはずと思い確認すると、期待通りの動作となっておりました。
挙動の違い
以下iOSとAndroidでの挙動の違いになります。
iOS
- カレンダー開いた時にonChange関数動く
- valueの値を書くとリセットできなくなる
Android
- 値を変えた時にonChange関数動く
- value値を設定しないといきなりリセットできない
- 何かvalueに値をセットしていればリセットできる
まとめると下記のよう部分に挙動の違いがありました。
- onChangeやonBlurなどの関数が動くタイミング
- リセットの動き
- valueとdefaultValueで値を設定したときの動き
結果的に実装した方法
以下のような形で実装を行いました。
- inputにrefを設定
- defaultValueで初期値は空にする
- フォーカス時に設定項目があれば設定
- iOSとAndroidで処理を分ける
まとめ
今までのWebアプリケーションでは、考慮したこともない点だったのでハマりました。
スマホでの操作も考慮する際は、実機で動きを細かく確認する必要があると思いました。
またスマホでデフォルトブラウザで設定している全てのブラウザに対応するとなると、確認だけでも膨大な時間を要するので、あらかじめそう言った点も考慮しておけばよかったと思いました。
LIFFアプリ開発むず、、、
