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

テキスト入力後にフォーカスが外れる
- 以前は外れなかった
最近の更新に「エラーが起きた時に入力欄を隠す」がある
- エラーが起きた時に入力欄を隠すにあたって、HTMLTextareaElementとボタンを全部まとめて関数コンポーネントにした
- この実装は内部でprops.visibleを見て分岐するもの 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;で解決
- バーチャルキーボードが消えたり、修正前に置いては入力欄コンポーネントが消えることによって「現在の表示エリアよりもコンテンツが短い」となった時にだけ、そのマージンの分だけスクロールが先に進みすぎるってわけ。

🪴 Quartz 4.0