React TextInput仅输入字母S时失焦问题求助

问题现象 #

使用MUI v5的TextField时，直接输入字母S会导致输入框失去焦点，焦点转移到页面上的"Select all" Link组件；但先输入其他字母再输入S则正常。移除该Link组件后问题消失。

原因分析 #

核心原因是字母S被识别为"Select all" Link的快捷访问键（accessKey）——尽管代码中未显式设置accessKey属性，但在Menu组件的上下文下，MUI的Link组件（或Menu的键盘导航逻辑）会默认将包含"Select all"文本的元素绑定首字母作为快捷访问键。当在输入框中按下S时，浏览器触发该快捷键，将焦点转移到对应的Link上，同时输入框失去焦点并显示高亮边框（焦点丢失后的默认样式）。

解决方法 #

方法1：覆盖Link的默认accessKey #

给"Select all"的Link显式设置accessKey={undefined}，阻止其自动绑定首字母作为快捷键：

<Link
  variant="body2"
  underline="hover"
  accessKey={undefined}
>
  Select all
</Link>

方法2：在TextField中阻止S按键的事件冒泡 #

在TextField的onKeyDown事件中，当按下S键时，阻止事件冒泡，避免触发外部Link的快捷键逻辑：

<TextField
  id="outlined-filter"
  sx={{ width: '100%' }}
  autoFocus
  label="Filter"
  onKeyDown={(e) => {
    if (e.key.toLowerCase() === 's') {
      e.stopPropagation();
    }
  }}
/>

方法3：替换Link为普通文本组件 #

如果不需要Link的跳转行为，将Link替换为Typography组件，手动添加点击事件，避开MUI Link的默认快捷键逻辑：

<Typography
  variant="body2"
  sx={{ textDecoration: 'underline', cursor: 'pointer' }}
  onClick={() => { /* 原Select all的点击逻辑 */ }}
>
  Select all
</Typography>

方法4：修改文本内容避开冲突 #

将"Select all"修改为其他不含S作为首字母的文本，比如"全选"（中文场景）或"Select All Items"，避免首字母触发快捷键：

<Link
  variant="body2"
  underline="hover"
>
  Select All Items
</Link>

内容的提问来源于stack exchange，提问作者Todd Worden