自定义select下拉框激活时未聚焦首个LI元素的问题求助

核心问题原因 #

• 原生<li>元素默认不支持聚焦，无tabindex属性时调用focus()方法无效
• 菜单显示逻辑顺序错误：调用聚焦方法时菜单还处于隐藏状态，浏览器无法给不可见元素设置焦点
• 菜单存在CSS过渡动画时，聚焦调用时机早于元素渲染完成时间，导致聚焦失效

修复方案 #

1. 给下拉选项添加可聚焦属性 #

初始化菜单项时统一添加tabindex="-1"属性，让元素支持JS主动聚焦，同时不会被键盘Tab键默认遍历：

[...menu.children].forEach(item => {
  // 新增行：设置可聚焦属性
  item.setAttribute('tabindex', '-1');
  item.addEventListener('keydown', handleItemKeyDown);
  item.addEventListener('click', () => setValue(item));
});

2. 调整聚焦调用时机与toggle逻辑顺序 #

先完成菜单显示的样式切换，再等浏览器渲染完成后执行聚焦操作，避免时序问题：

this.toggle = (expand = null) => {
  expand = expand === null ? menu.getAttribute("aria-expanded") !== "true" : expand;
  menu.setAttribute("aria-expanded", expand);
  
  if(expand) {
    // 先处理菜单显示逻辑
    toggler.classList.add('active');
    document.addEventListener('click', handleClickOut);
    dropDown.dispatchEvent(new Event('opened'));
    // 等待渲染完成后再聚焦首个选项，同时设置选中状态
    requestAnimationFrame(() => {
      const firstItem = menu.children[0];
      firstItem.setAttribute("aria-selected", "true");
      firstItem.focus();
    });
  } else {
    toggler.classList.remove('active');
    // 收起时清空所有选项的选中状态
    [...menu.children].forEach(item => item.setAttribute("aria-selected", "false"));
    toggler.focus();
    dropDown.dispatchEvent(new Event('closed'));
    document.removeEventListener('click', handleClickOut);
  }
}

额外检查项 #

• 确认CSS没有禁用<li>的聚焦样式，若设置了outline: none需补充自定义聚焦态样式，避免聚焦后无视觉反馈
• 若菜单使用display: none控制显隐，需确保切换为可见状态后再执行聚焦逻辑
• 排查是否有全局focus/focusin事件监听器拦截了下拉选项的聚焦行为

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