Fluent UI 8中Dropdown与Combobox点击无下拉列表问题排查

问题根源 #

React Strict Mode在开发环境中会触发组件的两次渲染（包括副作用的重复执行），目的是提前发现潜在的状态或副作用问题。而Fluent UI 8的Dropdown组件内部的弹出层（通过Portal挂载到body）状态管理逻辑未完全适配这种双重渲染行为：

• 第一次渲染时创建了弹出层DOM，但第二次渲染时被错误销毁或未重新创建，导致页面上看不到下拉列表。
• 键盘导航能正常工作是因为组件内部状态逻辑仍在运行，只是视觉层的DOM未正确挂载。
• 平板模式下侧边显示是因为响应式逻辑触发了不同的渲染路径，避开了这个兼容性问题。

解决方案 #

1. 开发环境临时关闭Strict Mode（快速临时方案） #

如果只是需要快速调试，可以暂时移除index.tsx中的<React.StrictMode>标签。注意：生产环境下Strict Mode不会触发双重渲染，所以该问题不会在生产环境出现，无需修改生产环境代码。

2. 改用受控组件模式（推荐兼容方案） #

通过明确管理Dropdown的selectedKey状态，避免Strict Mode双重渲染导致的状态重置问题。修改组件代码如下：

import { IStackTokens, ResponsiveMode, Stack } from '@fluentui/react';
import { Dropdown, DropdownMenuItemType, IDropdownOption, IDropdownStyles } from '@fluentui/react/lib/Dropdown';    
import { useState } from 'react';

const dropdownStyles: Partial<IDropdownStyles> = { dropdown: { width: 300 } };

const DropdownControlledMultiExampleOptions = [
  { key: 'fruitsHeader', text: 'Spooler status', itemType: DropdownMenuItemType.Header },
  { key: 'apple', text: 'Apple' },
  { key: 'banana', text: 'Banana' },
  { key: 'grape', text: 'Grape' },
  { key: 'broccoli', text: 'Broccoli' },
  { key: 'carrot', text: 'Carrot' },
  { key: 'lettuce', text: 'Lettuce' },
];

export const DropdownList: React.FunctionComponent = () => { 
  const stackTokens: IStackTokens = { childrenGap: 20 };
  // 明确管理选中状态
  const [selectedKey1, setSelectedKey1] = useState<string | undefined>(undefined);
  const [selectedKey2, setSelectedKey2] = useState<string | undefined>(undefined);

  return (
    <Stack tokens={stackTokens}>
      <Dropdown
        placeholder="Select an option"
        label="Disabled responsive"
        options={DropdownControlledMultiExampleOptions}
        styles={dropdownStyles}
        responsiveMode={ResponsiveMode.unknown}
        selectedKey={selectedKey1}
        onChange={(event, item) => setSelectedKey1(item?.key as string)}
      />
      <Dropdown
        placeholder="Select an option"
        label="Responsive with panel"
        options={DropdownControlledMultiExampleOptions}
        styles={dropdownStyles}
        selectedKey={selectedKey2}
        onChange={(event, item) => setSelectedKey2(item?.key as string)}
      />
    </Stack>
  );
};

3. 升级到Fluent UI 9（长期最优方案） #

Fluent UI 9是微软重构的新版本，完全适配React现代特性（包括Strict Mode），对组件的状态管理和Portal逻辑做了优化，从根源上避免这类兼容性问题。如果项目允许，可以考虑升级：

• 先卸载旧版本：npm uninstall @fluentui/react
• 安装新版本：npm install @fluentui/react-components @fluentui/react-icons
• 按照官方文档迁移Dropdown组件到新版本用法。

总结 #

如果只是开发环境调试，临时关闭Strict Mode能快速解决问题；如果需要长期兼容Strict Mode，改用受控组件是更稳妥的方案；有条件的话升级到Fluent UI 9可以彻底避免这类历史兼容性问题。

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