React.js -- 输入字段 -- 输入字母“c”或“n”时失去焦点

Question

所以我在 MaterialUI 的 MenuItem 内有一个输入字段，并且该 MenuItem 在 Menu 内。由于某些奇怪的原因，只有在输入字母“c”或“n”时，输入字段才会失去焦点。

这是一张带有输入字段的菜单图片。我注意到，当我键入字母“c”时，焦点从输入字段更改为第一个 MenuItem，我真的猜测这是因为内部文本以字母“c”开头。 （我会上传一张正在发生的事情的 gif，但 stackoverflow 说 gif 内存太大，无法上传）

由于输入失去焦点，字母“c”甚至没有被输入到输入字段中。焦点最终集中在其中包含“更改用户名”的菜单项上（我知道这一点是因为它以浅灰色突出显示）。这是最奇怪的事情，我无法弄清楚。我什至尝试使用普通的输入标签而不是来自material-ui的输入，它做了同样的事情。

这是包含输入的 MenuItem 的代码。

const changeCredentialsHandleChanges = (e:any) => {
    e.persist();
    const newCredentials = {...credentials, [e.target.name]: e.target.value}
    setCredentials(newCredentials);
    console.log(credentials);
    if(newCredentials.newPassword === newCredentials.confirmNewPassword){
        setChangePasswordButtonDisabled(false);
     } else {
         setChangePasswordButtonDisabled(true);
     }
}
    

<MenuItem disableGutters classes={{root: profileMenuClasses.text2}}>
    <div 
        style={{
            display: 'flex', 
            flexDirection: 'row', 
            alignItems: 'center', 
            borderBottom: '1px solid #F2F2F2', 
            minWidth: '100%', 
            maxHeight: '10px', 
            padding: '10px 0px 20px 15px'
            }}
            >
        <div 
            style={{
                cursor: 'pointer', 
                width: '20%', 
                maxHeight: '10px', 
                transform: 'scale(.7, .7)', 
                display: 'flex', 
                justifyContent: 'center', 
                alignItems: 'center', 
                marginLeft: '-8%'
                }} 
                onClick={changeUsernameHandleClick}
                >
                    <ArrowBackIosIcon fontSize='small' color='action'/>
        </div>
        <p 
            style={{
                width: '80%', 
                maxHeight: '10px', 
                color: '#000000', 
                fontWeight: 'bold', 
                fontSize: '11px', 
                marginBottom: '8%'
                }}
                >
                    Change Username
        </p>
    </div>
</MenuItem>
<MenuItem disableGutters classes={{root: profileMenuClasses.text2}}>
    <div 
        style={{
            display: 'flex', 
            flexDirection: 'column', 
            justifyContent: 'center', 
            borderBottom: '1px solid #F2F2F2', 
            minWidth: '100%', 
            whiteSpace: 'pre-line', 
            maxHeight: '50px'
            }}
            >
        <p 
            style={{
                color: '#000000', 
                width: '100%', 
                fontSize: '11px', 
                fontWeight: 600, 
                maxHeight: '12px', 
                margin: '0 0 0 5%'
                }}
                >
                    Current Username
        </p>
        <p 
            style={{
                color: '#000000', 
                width: '100%', 
                fontSize: '10px', 
                margin: '3% 0 10% 5%', 
                maxHeight: '10px'
                }}
                >
                    {currentUser.username}
        </p>
    </div>
</MenuItem>
<MenuItem disableGutters classes={{root: profileMenuClasses.text2}}>
    <div 
        style={{
            display: 'flex', 
            flexDirection: 'column', 
            justifyContent:'center', 
            minWidth:'100%', 
            whiteSpace:'pre-line'
            }}
            >
        <p 
            style={{
                color: '#888888', 
                fontSize:'11px', 
                margin: '0 0 0 5%', 
                maxHeight: '10px'
                }}
                >
                    New Username
        </p>
        <div 
        style={{
            display: 'flex', 
            justifyContent: 'center', 
            alignItems: 'center'
            }}
            >
            <Input 
                key='newUsernameInput'
                id='newUsername'
                type='text' 
                classes={{input: profileMenuClasses.input}} 
                disableUnderline 
                placeholder='New Username' 
                name='newUsername' 
                value={credentials.newUsername} 
                onChange={changeCredentialsHandleChanges}
                />
        </div>
        <Button 
            style={{
                width: '100px', 
                height: '26px', 
                margin: '7% 0 0 5%', 
                borderRadius: '15px', 
                fontSize: '11px', 
                backgroundColor: '#5540C7', 
                color: '#FFFFFF', 
                fontWeight: 600
                }} 
            onClick={changeUsernameOnSubmit}
            >
                CONFIRM
        </Button>
    </div>
</MenuItem>

这个程序中有数千行代码我没有处理（除了这个菜单和其他一些菜单（有同样的问题）），所以我的猜测是这个脚本中有一些代码块覆盖此输入字段的焦点。有什么想法，或者解决方法吗？

PS 其他所有字符都可以毫无问题地输入到输入字段中，只有字母“c”和“n”有问题。

Answer 1

我也有同样的问题。

我发现的最简单的解决方案是在 MenuItems 文本前面添加零宽度不间断空格符号 (u2060)。

就我而言，它看起来像这样：

<MenuItem>
  <Typography variant="body1">&#8288;Columns</Typography>
</MenuItem>

好：

• 文本不是从用户可以通过键盘输入的字母开始
• 零宽度不间断空格符号对布局没有影响

不太好：

• 您需要在标记中保留特殊符号

Answer 2

此问题与MUI组件库有关。 仅当在菜单组件内使用 TextField 时才会发生这种情况。

您可以向文本字段添加 onKeyDown 事件侦听器，并使用 stopPropagation 来防止键盘事件从输入冒泡到菜单。

<TextField onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
 e.stopPropagation();
}} />

参考问题：https://github.com/mui/material-ui/issues/19116