余計な小細工をする前に本体の最新バージョンを確認するの大事
Formikというライブラリを使ってフォームのReactコンポーネントを作っていたところ、なんだかおかしな挙動になってしまった。
textarea要素にテキストを入力しても、ボタンが押せるようにならない。
このフォームには、文字数は最低でも1文字以上というバリデーションをかけていて、正当ではないときはボタンを押せないようにしていた。期待しているのは、文字を入力しているときにその正当性がボタンの状態に反映されることだが、どうやらテキストエリアからフォーカスを外さないと、ボタンの状態に反映されないようだった。これは困った。
FormikのREADMEを読むと、validateOnChangeというpropsがあることがわかる。これをtrueにすればいいのか…？と思いきや、これはデフォルトでtrueになっている。関係なさそうだ。試しに明示的にtrueにしてみても、挙動は変わらない。うーむ。
Formikのissue一覧のページで、これを検索してみた。validateOnChangeがうまくいかないと嘆いている人が他にもいればしめたものだ。幸運なことに、こんなissueが見つかった。
答えとなっていたコメントはこれ。
しかしちょっと待ってくれ。フォームとして当たり前の挙動にしたいだけなのに、なんでよくわからん関数で包んであげないといけないんだ！
もう少しissueを眺めていると、こんなものが。
https://github.com/jaredpalmer/formik/issues/353
やはり同じことで困っている。
む、まてよ。
よくみると、こんなプルリクがこのissueを参照している…。
Fix #280. Fix the definition dirty and isValid #365 @justengland
プルリクの中身を見てみると、、どうだろう！！まさしく求めていた変更っぽいものが入ってるではないか！
このプルリクはマージされ、バージョン0.11.0としてリリースされていた。自分が使っていたのは0.10.5だったので、すぐさまバージョンを上げて実行すると…
直ってる！
バリデーションの結果がボタンの見た目に反映されてる！嬉しい！！
——
ということが、今日ありました。些細な例ですが、以下のようなことを学びました。
- github上で星が多いからといって安定したモジュールだというわけではない
- 当たり前の挙動を実現するために余計な小細工をする前に、本体が直されていないか（あるいは自分で直してPRを出せないか）確認するの大事
- だいたいライブラリを使っていて困ったときは自分だけではない
