Реагируйте MUI: TextArea внутри проблем фокусировки диалога

Question

Я пытаюсь заставить многострочную TextField работать (правильно) внутри диалогового компонента.

Я уже некоторое время борюсь с этой указанной c проблемой, я не уверен, что проблема связана с многоязыковым пользовательским интерфейсом или, возможно, связана с тем, как моя страница (диалоговое окно) перерисовывается при реакции.

Пожалуйста, посмотрите связанный рабочий пример не- . ЗДЕСЬ

Я также протестировал множество других подходов, таких как реструктуризация моего кода, упаковка вещей в memo и c .. но безрезультатно ...

В настоящее время происходит 1 из 3 вещей.

1.) Нет автофокуса => невозможно ввести

2 .) С помощью автофокуса => вид решает проблему ... при потере фокуса вход мигает

3.) С автофокусом + многострочный ... вход также теряет фокус (восстанавливает его, но курсор является началом ввода)

Теория

Я думаю, что это МОЖЕТ быть ошибкой в ​​React MUI, и я создал для нее тикет с ошибкой , но я хотел бы исключить, что это может быть не что-то другое Например, способ, которым я составил код диалогов, например, не запоминание правильных вещей, состояние, вызывающее обновления, которые он не должен делать, и т. д. c ...

Answer 1

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

Я провел небольшой тест где я удалил все блоки внутреннего кода и сохранил только basi c jsx, и проблема исчезла. (также больше не повторяет рендеринг, тем самым подтверждая мое подозрение)

Затем я добавил его обратно, затем запомнил только раздел контента.

После того, как я запомнил его, он решил все проблемы повторного рендеринга , Я не знаю, как я это пропустил изначально, но я списываю это на то, чтобы заблудиться в поиске проблемы: /

  const Content = useMemo(
    () =>  <Grid>... previous jsx</Grid>,
    [
      ReasonChips,
      feedback.comment,
      feedback.reason,
      isEditing,
      onSubmitClick,
      ratingOptions.length,
    ]
  );