Antd Select组件：在用户交互前预渲染listbox节点

Antd Select默认懒渲染下拉列表（仅在首次交互后才生成带role="listbox"的DOM节点），导致组件的aria属性（如aria-controls）指向不存在的元素，触发无障碍报告错误。以下是两种可行的解决方案：

方法一：使用Antd内置属性关闭懒渲染（推荐） #

Antd 4.x及以上版本的Select组件提供了lazyRender属性，默认值为true（懒渲染），将其设置为false即可在组件初始化时预渲染下拉菜单的DOM：

import { Select } from 'antd';

const { Option } = Select;

function YourComponent() {
  return (
    <Select
      lazyRender={false}
      placeholder="请选择选项"
      // 其他必要属性
    >
      <Option value="1">选项1</Option>
      <Option value="2">选项2</Option>
      <Option value="3">选项3</Option>
    </Select>
  );
}

原理 #

设置lazyRender={false}后，下拉菜单的DOM结构（包含role="listbox"的节点）会在组件挂载时就被渲染（即使下拉框处于关闭状态），无障碍工具能检测到该节点，从而让关联的aria属性指向有效元素，解决错误。

方法二：兼容旧版本的替代方案（Antd < 4.x） #

如果无法升级Antd版本，可通过强制初始展开下拉框并配合CSS隐藏的方式实现预渲染：

1. 组件代码：

import { useState, useEffect } from 'react';
import { Select } from 'antd';

const { Option } = Select;

function PreRenderSelect() {
  const [isOpen, setIsOpen] = useState(true);
  const [hasInteracted, setHasInteracted] = useState(false);

  // 组件挂载后立即关闭下拉框（确保DOM已渲染）
  useEffect(() => {
    const timer = setTimeout(() => setIsOpen(false), 0);
    return () => clearTimeout(timer);
  }, []);

  // 用户首次交互后，恢复正常的下拉控制逻辑
  const handleOpenChange = (open) => {
    setHasInteracted(true);
    setIsOpen(open);
  };

  return (
    <div className={`select-wrapper ${!hasInteracted ? 'hide-dropdown' : ''}`}>
      <Select
        open={isOpen}
        onOpenChange={handleOpenChange}
        placeholder="请选择选项"
      >
        <Option value="1">选项1</Option>
        <Option value="2">选项2</Option>
      </Select>
    </div>
  );
}

2. 对应的CSS：

.select-wrapper.hide-dropdown .ant-select-dropdown {
  visibility: hidden;
  position: fixed;
  top: -9999px;
  left: -9999px;
  pointer-events: none;
}

原理 #

初始时通过open={true}强制渲染下拉DOM，再用CSS将其隐藏在视口外且禁止交互；用户首次操作后，移除隐藏样式，恢复正常的下拉行为。

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