无法单击移动光标或突出显示 Material UI TextField 内的文本

Question

我在 React 项目中使用了 Material UI

TextField

组件。我无法突出显示文本或单击以将光标移动到其中。

<TextField
  variant={"standard"}
  className={styles._input}
  multiline={true}
  fullWidth={true}
  onChange={ onChange }
  value={ spec.t }
  autoFocus={true}
  onFocus={event => {
    event.target.select()
  }}
  onClick={() => console.log(">>>> CLICKED TEXT INPUT")}
  placeholder={"Enter Text"}
/>

_input

类只是设置

TextField

的字体。

我附加的

onClick

事件处理程序肯定会在每次单击或拖动到其中时触发，因此这不是

z-index

设置得足够高的问题。我的项目中的 CSS 中也没有任何

user-select: none

。

还有其他我应该注意的事情可能会导致这种情况吗？我真的很困惑为什么会发生这种情况。这只发生在这个人身上

TextField

；其他

TextFields

在我的项目工作中按预期进行。

Answer 1

我也遇到了同样的问题，事实证明，如果您有任何 JavaScript 可能在单击处理程序或相关事件侦听器中调用

event.preventDefault()

或类似方法，这可能会干扰表单元素的正常行为。

通过停止事件传播或阻止默认操作来确保没有父级或相关事件处理程序进行干扰