テキスト入力後にフォーカスが外れる

以前は外れなかった

最近の更新に「エラーが起きた時に入力欄を隠す」がある

エラーが起きた時に入力欄を隠すにあたって、HTMLTextareaElementとボタンを全部まとめて関数コンポーネントにした

この実装は内部でprops.visibleを見て分岐するもの

code:ts

const InputArea = (props: { visible: Boolean }) => {

if (props.visible) {

return ...;

}

return null;

};

僕の解釈: これはvisibleがtrueの間propsがシャローに同一なのでコンポーネントの再レンダリングは走らない

しかしフォーカスが外れるなどの振る舞いはHTMLTextareaElementが一度消えて再生成されてることを示唆する

フォーカスが外れること自体はautoFocus属性をつけることで解決できた

スクロールの位置がズレるようになった

大きなズレはその入力欄コンポーネントのレンダリングが終わってからスクロールするようにrequestAnimationFrameすることで解決された

が、微妙な(8pxの)ズレが残った。

動かなければズレてても気にならないが、入力のたびに8ピクセル上下にアニメーションするので鬱陶しい

DOMが再生成されることが問題をややこしくしていると判断

テキストエリアをif文の外に出してstyleのvisibilityで制御するようにした。

これでrequestAnimationFrameなしでもズレないようになった。

ただし、ブラウザから一度離れて戻ってきた時には8pxのズレが発生する。

その過程でバーチャルキーボードがオンオフされるのでその関係ではないかとアタリをつける

これはhrのmargin-bottomだ

margin-bottom: 0; border-bottom: 0;で解決

バーチャルキーボードが消えたり、修正前に置いては入力欄コンポーネントが消えることによって「現在の表示エリアよりもコンテンツが短い」となった時にだけ、そのマージンの分だけスクロールが先に進みすぎるってわけ。