発表の目的

トラブルシューティングへの道筋の建て方の共有や向上

概要

出くわした問題

リンク編集モーダルの中でbootstrapのカスタムラジオボタンが動かない...

現状の調査（どこまで動くのか)

• state は変わるのか
  • console.log やデバッガを用いる
  • react dev tool を用いる
  • 結果: state は変わっている
• ラジオボタンの before, after 属性は変化しているのか
  • ブラウザの inspector を使う
  • 結果: 変化していない
• カスタムラジオボタンだからいけないのか
  • bstr4 のカスタムじゃない方のradioボタンを使用
  • 結果: 動かない
• 素のラジオボタンだと動くのか
  • bstr 用のクラスを外し、 checked をstate制御しないようにした
  • 結果: 動かない
• チェックボックスは動くのか
  • 同じ箇所にチェックボックスを配置
  • 結果: 切り替わらない

原因の推測（何で動かないのか）

症状

html のラジオボタンのON/OFF表示がモーダル上で動かない

考えたこと

• input 要素の挙動が上手く働いていないのか
  • 適切な調査方法がわからず疲弊
• モーダル上だから動かないのか？
  • 管理画面ないのモーダルなどでは普通に動いている
  • HandsonTableでは動かない
  • CodeMirrorEditorないのモーダルでは動かないっぽい...!
  • refを使ったモーダル ON/OFFがいけない?→他の方法でもラジオボタンは動かず

未解決のまま放置...

リベンジ: 条件を変更した時の挙動調査

• どの要素の中なら動くのかを調査
  • モーダルをレンダリングする場所を変更
  • 結果: Dropzone より上なら動く、Dropzoneの子要素になると動かなくなる
• そもそもモーダルは関与してるのか調査
  • Dropzoneの外や中にシンプルなラジオボタンを配置してみる
  • 結果: モーダル上でなくても Dropzone より上なら動く、Dropzoneの子要素になると動かなくなる
• Dropzone を調査
  • react-dropzone を使っている

わかったこと: react-dropzone の中でラジオボタンのON/OFF表示が切り替わらない

解決策の提案

• そもそもラジオボタンを使わず、代替コンポーネントを使う
  • 懸念点: UI およびデザインの劣化
• Modal をレンダリングする場所を変える
  • Editor コンポーネントが複雑なので多分大規模な変更になる
• なんで相性が悪いかを追加調査する

今の自分ではこれらの方法しか思いつかない...

チームメンバー(itizawa)に相談

• react-dropdown の最終コミットが一ヶ月以内であることに着目、アップデートの提案

行き着いた解決策

• react-dropdown を最新版にアップデート
  • 結果: 動いた

まとめ

自分はこうゆう問題に出くわした時、とにかくトライアンドエラーで現状調査をする。知見の豊富な人はこうゆう時も見え方が変わってくるのだろうか（経験値が高いほど豊富な原因パターンの予想できるんだろうなぁ）

ちなみに

EasyGridModal でも同じ問題があってラジオボタンを使わないようにしているが、今回の修正で直った