TextFormFieldにFormatter入れたらiPhone日本語入力がバグる…

shinnaga·

タイトル内容の通り、、TextFormFieldのinputFormattersに入力値を変更するformatを設定すると、iPhoneの日本語入力した時に入力がバグる

発生事象

https://twitter.com/_mono/status/1239779596515434496

上記挙動と全く同じ

発生条件

  • TextFormFieldのinputFormattersに自作formatを設定する（mask_text_input_formatter）でも可

  • iPhoneエミュレータにて実行

  • TextFormFieldに日本語キーボードで英字or数字を入れる

解決方法

  • 原因：自作formatの作り方が悪い

    • formatEditUpdateメソッド内にて、引数newValueを上書きしていた

    • newValueはTextEditingValue型であり、当該型はimmutable属性の為、上書き厳禁！

  • 対応：newValueの上書きをcopywithにて代用

解決方法に至る調査過程

何故、テキストが重複して入力されるか確認すべく、どの時点で文字が重複して入っているか調査。

  • TextFormField > TextField > EditableTextと辿ると、iOSからmethodChannel経由で値を受信していることが確認できた。

  • iOSから受信した時点で値は重複して入っていた為、flutterFramework内で値が重複しているわけではない

  • flutter範疇での重複入力の制限は難しい。

formatの書き方で救えないか調査。

  • 空のformatでは事象発生するか確認。　→　事象発生しない！

  • 文字列加工したら事象発生するか確認。　→　事象発生しない！

  • newValueのselectionプロパティを変更したら…　→　しない！

  • 既存コードで特殊なことしているか確認。　→　immutableに代入！？

    • これをcopywithに変更したら、重複入力は回避された。

結論

  • packageは正しく使おう。

  • flutterはなるべくimmutableな考えが適しているかも。

  • 調査で最初に実装方法を疑え

以上

flutterknowledge
@shinnaga
shinnaga