概要
Reactstrap のモーダルを開いた時に自動的に input にfocus を当てて欲しい（モーダルを開いて文字を打てば入力ができる)
純粋な実装方法
input の autofocus attr もしくは onFocus() を使う
AsyncTypeAhead by react-bootstrap-typeahead
今回フォーカスを当てたい react-bootstrap-typeahead の AsyncTypeAhead にも、その props に AutoFocus が用意されていて input 同様のフォーカスの挙動ができる
問題点
Reactstrap の Modal 上ではこのフォーカスがうまく動かない
autoFocus=true の AsyncTypeAhead はもちろん、 <input type="text" autofocus /> もフォーカスされない
こんな感じで、ドロップダウンは出現するがinput にフォーカスは当たっていない
対策案
ref を使い onFocus を走らせる
そもそもAsyncTypeAhead はその方法で対象のinput要素のonFocus を利用している
挫折
そもそもモーダルないにあるコンポーネントの ref による取得がうまくいかない
レンダーが完了した後でなければ実態を取得できない
結果的には解決した
reactstrap のモーダル独自のフォーカス管理があるらしく、それを autoFocus={false} とすることで無効にできる