質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

[React, Material-UI] TextFieldのフォーカスが1文字打つたびに外れてしまう

yahi_23
yahi_23

総合スコア10

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0リアクション

0クリップ

181閲覧

投稿2022/08/29 05:44

発生している問題・エラーメッセージ

React, Material-UIを使って開発をしています。
Material-UIのTextFieldで1文字打つたびにフォーカスが外れてしまいます。
なお、TextFieldで入力した値はreact-hook-formでwatchしています。
原因、解決方法を教えていただきたいです。

該当のソースコード

react

return ( <form onSubmit={handleSubmit(onSubmit)}> <MuiGrid container xs={7} md={8} sx={{ m: 'auto' }} alignItems="center" justifyContent="center"> <Table aria-label="collapsible table"> <TableBody> <TableRow sx={{ p: 0, height: '56px' }} key={'1'}> <TableCell sx={{ p: 1.5, width: '20%' }} component="tr" scope="row"> <Typography>割合(%)</Typography> </TableCell> <TableCell component="tr" scope="row" sx={{ p: 1.5, textAlign: 'center', justifyContent: 'space-between', alignItems: 'center', }}> // ここが該当箇所です。 // TextFieldで入力した値はreact-hook-formでwatchしています。 <TextField label="割合" type="text" margin="normal" sx={{ margin: 0, width: 100 }} inputRef={el => (keyRef.current = el)} {...register('netRate', { pattern: /^[0-9]+$/, setValueAs: value => !parseInt(value) ? 0 : parseInt(value), })} InputProps={{ inputProps: { style: { textAlign: 'right', padding: 10 }, }, }} /> </TableCell> </TableRow> </TableBody> </Table> </form> ) })

試したこと

以下の方法を試してみましたが、解決できてませんでした。

TextFieldを別コンポーネントにして外に出す
inputProps={{ autoFocus: true }} を追記する
inputRef={input => input && input.focus()} でフォーカスさせる

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。