React MUI：对话框焦点问题中的 TextArea

Question

我正在尝试让多行 TextField 在对话框组件中（正确地）工作。

我已经为这个特定问题苦苦挣扎了一段时间，我不确定这个问题是否与 MUI 相关，或者可能与我的页面（对话框）在反应中重新呈现的方式有关。

请参阅链接的非工作示例。 HERE

我也测试了许多其他方法，例如重构我的代码、将内容包装在备忘录中等。但无济于事...

目前发生了 3 件事中的 1 件事。

1.) 没有自动对焦 => 无法打字

2.) 使用自动对焦 => 某种程度上解决了问题...失去焦点时，输入闪烁

3.) 使用自动对焦+多行...输入也失去焦点（重新获得焦点，但光标作为输入的开头）

理论

我认为这可能是 React MUI 中的一个错误，并且已经为它创建了一个 bug ticket，但我想排除它可能不是别的东西，例如我的方式编写对话框代码，例如，没有记住正确的东西，导致更新的状态不应该等...

Answer 1

问题与提取的 Content 内部组件有关...添加自动对焦通过在每次按键时将焦点添加回新创建的元素来掩盖问题。

我做了一个小测试，删除了所有内部代码块，只保留了基本的 jsx，问题就解决了。（也不再重新渲染，从而证实了我的怀疑）

然后我将其添加回去，然后只记住了内容部分。

一旦我记住了它，它就解决了所有重新渲染的问题。我不知道我最初是怎么错过的，但我把它写下来，因为在寻找问题时迷路了：/

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

React MUI：对话框焦点问题中的 TextArea

React MUI: TextArea inside dialog focus issues

reactjs

material-ui

react-material