styled-componentsとredux-formの組み合わせ時にフォーカスが外れる問題について

styled-componentsとredux-formを併用している時に、
フォームのデザインをすると文字の入力をすると、一文字打つごとにフォーカスが外れてしまう問題が起きてました。

 

問題

 

ちょっとわかりにくいですが、こんな感じになってしまいます。
フォームに緑の下線が入っているときにフォーカスが入っています。
一文字打つごとにフォーカスが外れるので、毎度クリックしてフォーカスしてから文字を入力しています。

 

問題のあるコードは以下のような感じです。

 

改善法

 

答えを知ってしまうと凄い単純ですが、スタイルを定義するところをコンポーネントの外側に出します。

render()の中に入っていると、変更があるたびに再描画されるのでフォーカスが外れてしまうようです。

 

すると、こんな感じにスタイルを当てつつ普段通りに文字を入力することができます。

コメントを残す