Material-ui中显示popper时如何保持对输入字段的关注

【问题标题】：How to maintain a focus on Input field when popper is shown in Material-uiMaterial-ui中显示popper时如何保持对输入字段的关注
【发布时间】：2020-05-02 20:07:33
【问题描述】：

我想在输入字段上添加接受和拒绝按钮，这些按钮仅在用户专注于输入字段时才会出现。类似于我们在 Jira 中得到的。

我尝试使用 material-ui 创建一个类似的组件。问题是，当我专注于输入字段时，它会显示这两个按钮，但后来我无法在输入框中输入。

有人可以帮我解决这个问题吗？下面是一个代码沙箱： https://codesandbox.io/s/material-demo-2hrc4?file=/demo.tsx

【问题讨论】：

标签： reactjs material-ui react-hook-form

【解决方案1】：

我能够使用 ButtonGroup 和条件渲染（不是使用弹出框）来完成您想要的操作。我的猜测是 Popover 有一些 z-index 可能是因为我们无法在输入中输入任何内容，对此并不完全确定。

看看它是否适合你 - https://codesandbox.io/s/material-demo-sgpt6?file=/demo.tsx

你也忘了处理你的输入状态 -

     <FilledInput
        id="filled-adornment-weight"
        value={value}
        aria-describedby="filled-weight-helper-text"
        inputProps={{
          "aria-label": "weight"
        }}
        onFocus={handleClick}
        onChange={e => setValue(e.target.value)} //set value//
      />

【讨论】：

哦，太棒了。这正是我想要实现的目标。非常感谢您的快速回复。
@Mahesh 很高兴能提供帮助。 :D