使用 Menu 呈现时，TextField 与键“a”的工作方式不同

如何解决使用 Menu 呈现时，TextField 与键“a”的工作方式不同

我的 React 应用程序中有此代码（组件 MyText）：

  public render(): JSX.Element {  
    return (
      <Fragment>
        <Box m={4}>
          <Typography variant="h6" color="textSecondary">
            Write some text
          </Typography>
          <TextField
            value={this.state.text}
            size="small"
            fullWidth={true}
            onChange={(event): void => this.setState({ text: event.currentTarget.value }) }
          />
        </Box>
      </Fragment>
    );

代码位于 Popover 组件中。然后我有一个带有 MenuItem 的 Menu 组件，可以打开 Popover。出于某种原因，按下“a”时文本输入的工作方式有所不同。所有其他字符都可以工作，但是当键 'a' 没有直接跟在某个其他键之后时，按 'a' 会使 TextField 失去焦点。因此“a”作为第一个字母不起作用。

当app是这样的时候，TextField出现了问题：

        <App>
          <Menu>
            <MenuItem>
              <MyPopover>
                <MyText>
                  {example code}
                </MyText>
              </MyPopover>
            </MenuItem>
          </Menu>
        </App>

当我这样渲染时，TextField 工作正常：

        <App>
          <Box>
              <MyPopover>
                <MyText>
                  {example code}
                </MyText>
              </MyPopover>
          </Box>
        </App>

有什么想法可以在哪里查找错误吗？