Блог

Я пытаюсь построить простой диалог с текстовыми полями, но по какой-то причине он теряет фокус при вводе письма.

Я пытался использовать ссылки, автофокус и другие решения, но все равно это не сработало.

Оператор возврата моего функционального компонента:

 <CustomDialogWithChildren open={dialog} title={"Machine Group Creation Wizard"}
  loader={dialogLoader} noBtn={false}
  handleApprove={handleApprove} handleClose={handleClose}
>

  <TextField
    // id="mg-name"
    key={"mg-name"}
    label="Name"
    value={mgName}
    onChange={handleNameChange}
    style={{ width: '80%', marginBottom: 10 }}
  // ref={(input) => nameRef = input}

  />
</CustomDialogWithChildren>
 

Этот компонент вложен в кучу других компонентов , которые состоят из Grid Paper и более.

Есть ли что-то, чего мне здесь не хватает? У меня в приложении есть несколько TextField s, вложенных в другие компоненты, но я никогда не сталкивался с этой проблемой. Единственная разница в том, что это диалог, который, я думаю, говорит сам за себя.