mui TextFiled に onFocus を使用すると挙動がおかしくなる

概要

mui の TextField を React Hooks Form と組み合わせて使うためのオリジナルのコンポーネントを使って、useFieldArray をすると何故か入力が中途半端に別フィールドに同期してしまう減少が発生。

以下の画像のような動作。完全に動悸するわけでもなく1打鍵目だけ他のフィールドにも飛び火する感じで入力される。

原因

onFocus を TextField に使用していたことだった。

汎用性の高いコンポーネントにするためにいろいろな機能をもたせていたのだが、その一つに multiline の入力の場合には、フォーカスがあたっているときはマルチラインにして、ブラーした際にフォールドする機能をつけており、それで onFocus を使っていた。

しかし、改めて mui のドキュメントなど見てみると onFocus という props は存在していない。inputProps に onFoucs を移してみても状況は改善せず。

しかし。onFoucs で呼び出す関数としてつくっていた handleFoucs の処理をなくすと症状が改善。

この handleFoucs の処理のラグにより、別のフィールドにもフォーカスがあたっていて同時に入力するという不可解な現象が起こっていると決めつけました。
※ 正直明確な原因ん理由はわかっていません。

対策

onFoucs を使わず onClick を使用する。

これだけです。
改めて mui TextField にフォーカスした際の処理の実装をしらべ、 onClick を使用している情報を見つけたためそちらで実装すると問題が解消されました。