Windows环境下Antd Select/Popover下拉位置异常问题咨询

问题现象 #

在Windows环境下使用antd/dist/antd.css时，Antd Select组件的下拉选项会错误显示在屏幕左上角且不可见，Popover组件的下拉面板也存在相同位置异常；刷新页面后，下拉选项会恢复到Select组件下方的正常位置。

异常状态截图 #

恢复后状态截图 #

相关代码 #

Select组件实现代码

<div className="select-filter pt5 pb8">
  <Select
    bordered={false}
    customSelect={false}
    showSearch
    filterOption={(input, option: OptionsInterface) => option.label
      .toLowerCase()
      .indexOf(input.toLowerCase()) >= 0}
    placeholder={t('common.filters.selectSubject')}
    data={[
      {
        label: t('common.filters.selectSubject'),
        value: '',
        name: t('common.filters.selectSubject'),
      },
      ...(subjects ? subjects.map((subject) => ({
        value: subject?.variant_subject_id ? subject.variant_subject_id?.join(',') : subject?.id.toString(),
        name: subject?.name,
        label: subject?.name,
      })) : []),
    ]}
    value={filterValue?.subjectId}
    onSelect={(value) => {
      const subjectObj = subjectMapper[Number(value)];
      if (subjectObj?.variant_subject_id) {
        const variantSubject = subjectObj?.variant_subject_id?.join(',');
        handleUpdateFilterState(variantSubject,
          SUBJECT_ALLOCATION_CONSTANTS.SUBJECT_ID);
      } else {
        handleUpdateFilterState(String(value),
          SUBJECT_ALLOCATION_CONSTANTS.SUBJECT_ID);
      }
      if (value) {
        trackEvent({
          eventType: CLICKSTREAM.EVENT_TYPES.COMMON,
          allow: CLICKSTREAM.ALLOW,
          name: CLICKSTREAM.EVENTS.SUBJECT_ALLOCATION.SELECT_SUBJECT_FILTER.NAME,
          props: {
            subject: subjects?.filter((sub) => {
              if (sub?.variant_subject_id) {
                return sub?.variant_subject_id?.join(',') === value?.toString();
              }
              return sub?.id?.toString() === value?.toString();
            })[0]?.name || '',
          },
        });
      }
    }}
  />
</div>

异常时的DOM结构

<div class="lead-select-dropdown lead-select-dropdown-placement-bottomLeft  lead-select-dropdown-hidden" style="min-width: 180px; width: 180px; left: -949px; top: -999px;">

解决方案 #

1. 优先加载Antd样式文件 #

这类定位异常大多是因为Antd的CSS在组件渲染后才加载完成，导致下拉面板的定位样式未初始化。确保在应用入口文件（如index.js/App.js）最顶部引入样式：

import 'antd/dist/antd.css';

2. 检查父容器动态样式 #

如果Select/Popover所在的父容器存在动态修改position、overflow等属性的逻辑，会干扰Antd的定位计算。检查select-filter类的样式，避免在组件渲染后动态改变定位相关属性。

3. 手动触发定位更新 #

组件挂载完成后，手动调用Select的定位更新方法（原生Antd Select可通过ref获取实例；自定义封装的Select需确保暴露该方法）：

import { useRef, useEffect } from 'react';

const MyComponent = () => {
  const selectRef = useRef(null);

  useEffect(() => {
    selectRef.current?.updatePosition();
  }, []);

  return (
    <div className="select-filter pt5 pb8">
      <Select
        ref={selectRef}
        // 其他属性保持不变
      />
    </div>
  );
};

4. 升级Antd版本 #

部分旧版本Antd在Windows环境下存在定位计算Bug，尝试升级到最新稳定版：

npm install antd@latest

5. 移除自定义容器配置 #

如果给Select/Popover设置了getContainer属性，可能导致定位容器异常。移除该属性，让组件默认挂载到body下：

// 错误示例：
<Select getContainer={() => document.getElementById('custom-container')} />

// 改为默认配置：
<Select />

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