Nuxt 3 集成PrimeVue Dropdown：方向键无法切换选项求助

排查思路 #

• 核对PrimeVue版本：两个项目的PrimeVue版本要和官方演示页一致，键盘导航逻辑可能在旧版本存在bug。执行npm list primevue查看版本号，对比官方最新稳定版。
• 检查Nuxt配置：确认nuxt.config.ts里正确注册了PrimeVue模块，不要禁用组件默认行为，比如有没有设置directives: false或者全局拦截键盘事件的相关配置。
• 排查键盘事件冲突：查看项目中是否有全局的keydown事件监听，或是父组件里的键盘事件阻止了冒泡，导致Dropdown的原生键盘事件被拦截。
• 极简项目测试：新建一个干净的Nuxt3项目，仅引入PrimeVue和Dropdown组件，测试方向键功能是否正常，以此排除其他依赖或自定义代码的干扰。
• 查看DOM焦点状态：打开浏览器开发者工具，检查Dropdown展开后的DOM结构，确认选项列表的tabindex设置正确——正常情况下，下拉菜单展开后焦点应该从箭头图标转移到第一个选项上。

可行解决方案 #

• 升级PrimeVue到最新稳定版：如果当前版本落后，执行npm install primevue@latest，很多键盘导航的bug在新版本中已经被修复。
• 取消全局键盘事件拦截：如果项目中有全局监听keydown事件的代码，确保不要对方向键调用event.preventDefault()或event.stopPropagation()。
• 手动初始化键盘导航：在组件的onMounted钩子中，调用Dropdown实例的initKeyboardNavigation方法（PrimeVue部分版本提供该API），确保键盘事件绑定到位。
• 自定义键盘事件处理：如果以上方法无效，可以在Dropdown组件上绑定keydown事件，手动处理方向键逻辑：

<Dropdown ref="dropdownRef" ... @keydown="handleKeyDown" />

<script setup>
const dropdownRef = ref(null)

const handleKeyDown = (event) => {
  if (!dropdownRef.value?.panelVisible) return
  const options = dropdownRef.value.options
  const activeIndex = options.findIndex(opt => opt === dropdownRef.value.selectedOption)
  
  switch (event.key) {
    case 'ArrowDown':
      event.preventDefault()
      const nextIndex = (activeIndex + 1) % options.length
      dropdownRef.value.selectOption(options[nextIndex])
      break
    case 'ArrowUp':
      event.preventDefault()
      const prevIndex = (activeIndex - 1 + options.length) % options.length
      dropdownRef.value.selectOption(options[prevIndex])
      break
  }
}
</script>

• 检查SSR配置：如果使用了SSR模式，确保PrimeVue组件在客户端正确完成hydrate，避免DOM渲染异常导致焦点管理失效。

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