Material UI多选组件箭头键导航失效问题求助

问题场景 #

在MUI的多选Select组件内部添加TextField后，键盘上下箭头的列表导航功能失效，按下箭头键时会聚焦到外层div并触发页面滚动。尝试给MenuItem添加autoFocus属性会直接定位到最后一个列表项，且不想改用AutoComplete组件。

解决步骤 #

• 拦截TextField的上下箭头事件：给TextField添加onKeyDown事件，当按下上下箭头时阻止事件冒泡，避免干扰Select的键盘导航逻辑。
• 调整Select的键盘事件处理：优化原有的onKeyDown逻辑，只在必要时阻止事件传播，保留菜单的正常导航行为。
• 设置菜单初始焦点：通过MenuProps的onOpen回调，在菜单打开时手动将焦点定位到第一个MenuItem，确保键盘导航从列表项开始。

修改后的完整代码 #

import * as React from "react";
import { Theme, useTheme } from "@mui/material/styles";
import MenuItem from "@mui/material/MenuItem";
import TextField from "@mui/material/TextField";
import FormControl from "@mui/material/FormControl";
import Select, { SelectChangeEvent } from "@mui/material/Select";

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 250
    }
  },
  onOpen: () => {
    // 菜单打开后聚焦第一个MenuItem
    setTimeout(() => {
      const firstMenuItem = document.querySelector('.MuiMenuItem-root') as HTMLElement;
      firstMenuItem?.focus();
    }, 0);
  }
};

const names = [
  "Oliver Hansen",
  "Van Henry",
  "April Tucker",
  "Ralph Hubbard",
  "Omar Alexander",
  "Carlos Abbott",
  "Miriam Wagner",
  "Bradley Wilkerson",
  "Virginia Andrews",
  "Kelly Snyder"
];

function getStyles(name: string, personName: string[], theme: Theme) {
  return {
    fontWeight:
      personName.indexOf(name) === -1
        ? theme.typography.fontWeightRegular
        : theme.typography.fontWeightMedium
  };
}

export default function MultipleSelect() {
  const theme = useTheme();
  const [personName, setPersonName] = React.useState<string[]>([]);

  const handleChange = (event: SelectChangeEvent<typeof personName>) => {
    const {
      target: { value }
    } = event;
    setPersonName(
      // 自动填充时会拿到字符串格式的值
      typeof value === "string" ? value.split(",") : value
    );
  };

  return (
    <div>
      <FormControl sx={{ m: 1, width: 300 }}>
        <Select
          multiple
          value={personName}
          onChange={handleChange}
          MenuProps={MenuProps}
          onKeyDown={(e) => {
            // 只拦截非导航键的事件传播，保留上下箭头和ESC键的原生行为
            if (!["ArrowUp", "ArrowDown", "Escape"].includes(e.key)) {
              e.stopPropagation();
            }
          }}
        >
          <div style={{ textAlign: "center", margin: "20px 0px" }}>
            <TextField
              placeholder="type..."
              onKeyDown={(e) => {
                // 拦截上下箭头事件，避免干扰Select的导航逻辑
                if (e.key === "ArrowUp" || e.key === "ArrowDown") {
                  e.stopPropagation();
                }
              }}
            />
          </div>
          {names.map((name) => (
            <MenuItem
              key={name}
              value={name}
              style={getStyles(name, personName, theme)}
            >
              {name}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}

原理说明 #

1. TextField事件拦截：上下箭头的事件被阻止冒泡后，不会干扰Select组件内部的键盘导航逻辑，确保箭头键能正常控制MenuItem的焦点切换。
2. 初始焦点设置：通过onOpen回调延迟聚焦第一个MenuItem，避免菜单打开时焦点默认落在TextField上，保证键盘导航从列表项开始。
3. Select事件优化：调整onKeyDown的拦截逻辑，只阻止非导航键的传播，保留上下箭头和ESC键的原生行为，确保菜单的正常交互。

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