reactjs 如果列表包含折叠组件,如何使用箭头键导航Material UI MenuList

ivqmmu1c  于 2022-11-22  发布在  React
关注(0)|答案(1)|浏览(135)

bounty已结束。回答此问题可获得+100声望奖励。奖励宽限期将在21小时后结束。Oleksandr Tkalenko希望吸引更多人关注此问题。

假设我有一个带有MenuItems的Material UI MenuList。菜单在屏幕上从上到下显示,我可以使用Tab/Tab+Shift键或向上/向下箭头键导航菜单。
然而,在一些情况下,
一些MenuItem有子项,我使用Collapse组件展开这些子菜单。我仍然可以使用Tab键导航菜单中的每个项,包括子菜单(由于所有项都具有tabIndex=0),但是当使用箭头键时,我只能导航“顶部”菜单项,而不是子菜单。不过,也可以使用Tab键进入子菜单,然后在子菜单中使用箭头键。(虽然它仍然有点bug,但当我到达子菜单的末尾时,焦点会移到第一个顶部菜单项)
Collapse组件破坏了MenuList的子级列表,我无法找到覆盖此行为的方法。
See Codesandbox example
最简单的解决方案是使Up/Down键具有与Tab键相同的功能,但我认为不可能在按下Down键时只调度Tab键事件。

tnkciper

tnkciper1#

要使Up/Down键具有与Tab键相同的功能,最简单的方法是使用React.useEffect挂钩。这将允许您在按下Down键时调度一个keypress事件。
更改这些行:

const handleKeyDown = (event) => {
  if (event.key === "ArrowRight" && !open) {
    setOpen(true);
  } else if (event.key === "ArrowLeft" && open) {
    setOpen(false);
  } else if (event.key === "ArrowDown") {
    //event.dispatchEvent(new Event("keypress", { keyCode: 9 }));
  }
};

对此:

React.useEffect(() => {
  const handleKeyDown = (event) => {
    if (event.key === "ArrowRight" && !open) {
      setOpen(true);
    } else if (event.key === "ArrowLeft" && open) {
      setOpen(false);
    } else if (event.key === "ArrowDown") {
      event.dispatchEvent(new Event("keypress", { keyCode: 9 }));
    }
  };
  document.addEventListener("keydown", handleKeyDown);
  return () => {
    document.removeEventListener("keydown", handleKeyDown);
  };
}, [open]);

这将使向上/向下键具有与Tab键相同的功能。

相关问题