React.js -- 输入框 -- 输入字母 "c" 或 "n" 时失去焦点

Question

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

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

由于输入失去焦点，字母“c”甚至没有输入到输入字段中。焦点最终落在其中包含“更改用户名”的 MenuItem 上（我知道这一点，因为它以浅灰色突出显示）。这是最奇怪的事情，我无法弄清楚。我什至尝试使用普通输入标签而不是来自 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 的文本前面添加零宽度不间断 space 符号 (⁠)。

在我的例子中是这样的：

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

好：

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

不太好：

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

React.js -- 输入框 -- 输入字母 "c" 或 "n" 时失去焦点

React.js -- input field -- losing focus when typing letters "c" or "n"

focus

input

reactjs

material-ui