按下Tab键时onKeyDown为何在onBlur之后触发？

你遇到的问题是因为Material UI Button组件内部已经对键盘事件（Space/Enter）做了默认处理，直接绑定onKeyDown会出现触发时机不符合预期的情况。以下是两种解决方案：

方案1：使用onClick替代（推荐） #

Material UI Button默认支持通过Space或Enter键触发onClick事件，完全符合可访问性要求。如果你只是需要在用户通过键盘或鼠标触发按钮时执行逻辑，直接用onClick即可，无需额外绑定键盘事件：

<Stack spacing={2} direction="row">
  <Button variant="text" onClick={() => { console.log("fooo") }}>Text</Button> 
  <Button variant="contained">Contained</Button>
  <Button variant="outlined">Outlined</Button>
</Stack>

方案2：自定义键盘事件处理 #

如果必须使用onKeyDown实现自定义逻辑，需要明确监听键盘按键，并可根据需求决定是否阻止默认行为：

<Stack spacing={2} direction="row">
  <Button 
    variant="text" 
    onKeyDown={(e) => {
      // 监听Space或Enter键
      if (e.key === ' ' || e.key === 'Enter') {
        console.log("fooo");
        // 可选：阻止默认行为，避免同时触发onClick
        // e.preventDefault();
      }
    }}
  >
    Text
  </Button> 
  <Button variant="contained">Contained</Button>
  <Button variant="outlined">Outlined</Button>
</Stack>

之所以会出现“切换到其他元素后才触发”的现象，是因为按住Space键时，Button会保持激活状态，直到松开按键或失去焦点，此时onKeyDown事件才会被触发。通过上述方式明确监听按键，可以确保事件在按下时立即执行。

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