Shadcn下拉菜单点击外部后按钮仍保持焦点的问题求助

针对点击下拉菜单外部后按钮仍处于焦点状态的问题，可通过以下几种方式解决：

• 利用Radix Menu的onClose回调手动失焦
  给Menu组件添加onClose事件，在菜单关闭时主动让触发按钮失焦。示例代码如下：

  import { useRef } from 'react'
  import { Menu, MenuTrigger, MenuContent, MenuItem } from '@/components/ui/menu'
  import { Button } from '@/components/ui/button'
  
  export function DropdownMenu() {
    const triggerRef = useRef<HTMLButtonElement>(null)
  
    return (
      <Menu onClose={() => triggerRef.current?.blur()}>
        <MenuTrigger asChild>
          <Button ref={triggerRef}>打开菜单</Button>
        </MenuTrigger>
        <MenuContent>
          <MenuItem>选项1</MenuItem>
          <MenuItem>选项2</MenuItem>
        </MenuContent>
      </Menu>
    )
  }
  

• 排查自定义焦点逻辑干扰
  检查项目中是否存在全局焦点管理代码（如路由切换后的自动聚焦、自定义键盘事件处理），这类代码可能会覆盖Radix组件的默认焦点行为，需调整相关逻辑避免冲突。

• 更新组件版本
  确认@radix-ui/react-menu和Shadcn的UI组件包为最新版本，旧版本可能存在焦点管理的bug，更新后通常能解决此类问题。

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