所以我在 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”有问题。
我也有同样的问题。
我发现的最简单的解决方案是在 MenuItems 文本前面添加零宽度不间断空格符号 (u2060)。
就我而言,它看起来像这样:
<MenuItem>
<Typography variant="body1">⁠Columns</Typography>
</MenuItem>
好:
不太好:
此问题与MUI组件库有关。 仅当在菜单组件内使用 TextField 时才会发生这种情况。
您可以向文本字段添加 onKeyDown 事件侦听器,并使用 stopPropagation 来防止键盘事件从输入冒泡到菜单。
<TextField onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
e.stopPropagation();
}} />