解决react-select AsyncPaginate多选下拉点击外部关闭及closeMenuOnSelect失效问题

你当前的问题在于把dropDownRef绑定到了自定义的外层Styled组件上，而非react-select实际渲染的下拉菜单容器，导致点击外部的判断逻辑无法生效。以下是针对性的修复方案：

关键修改点 #

1. 自定义Menu组件并通过forwardRef获取菜单容器的DOM引用
2. 调整菜单状态控制逻辑，避免多选时菜单意外关闭
3. 修正外部点击监听的依赖项，优化性能

完整修复代码 #

import React, { useState, useRef, useEffect, useMemo, forwardRef } from 'react';
// 导入你的其他依赖：AsyncPaginate, Creatable, withAsyncPaginate, 样式组件等

export const AsyncSelectField = ({ 
  className, 
  disabled, 
  label, 
  optional, 
  description, 
  id, 
  value, 
  isMulti, 
  hideSelectedOptions, 
  options, 
  loadOptions, 
  onChange, 
  placeholder, 
  backspaceRemovesValue, 
  isClearable, 
  isOptionDisabled, 
  isCreateable, 
  isLoading, 
  showDropdownIcon, 
  showMenuList 
}) => {
  const [menuOpen, setMenuOpen] = useState(false);
  const dropDownRef = useRef(null);

  // 自定义Menu组件，通过forwardRef获取菜单容器DOM
  const Menu = forwardRef((props, ref) => {
    return <components.Menu {...props} ref={ref} />;
  });

  const handleMenuClose = () => {
    // 仅在非多选模式下关闭菜单，多选模式下保持菜单打开（由外部点击控制关闭）
    if (!isMulti) {
      setMenuOpen(false);
    }
  };

  useEffect(() => {
    const handleClickOutside = (event) => {
      // 检查点击目标是否在菜单容器外部
      if (dropDownRef.current && !dropDownRef.current.contains(event.target)) {
        setMenuOpen(false);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []); // 空依赖，仅在组件挂载/卸载时绑定/移除监听

  const Option = (props) => {
    return (
      <components.Option {...props}>
        <RenderOption {...props} />
      </components.Option>
    );
  };

  const SingleValue = (props) => {
    return (
      <components.SingleValue {...props}>
        <RenderSingleValue {...props} />
      </components.SingleValue>
    );
  };

  const CreatableAsyncPaginate = withAsyncPaginate(Creatable);
  const AsyncPaginateField = useMemo(
    () => (isCreateable ? CreatableAsyncPaginate : AsyncPaginate),
    [CreatableAsyncPaginate, isCreateable],
  );

  return (
    <AsyncSelectFieldStyled className={className} disabled={disabled}>
      {label && (
        <div className="label" data-testid="label">
          <Typography color="#2B3952">{label}</Typography>
          {optional && <div className="optionalField">(Optional)</div>}
          {description && (
            <div data-testid="description" className="info-icon">
              <Description description={description} />
            </div>
          )}
        </div>
      )}
      <AsyncPaginateField
        key={id}
        id={id}
        className="async-paginated-select"
        classNamePrefix="react-select"
        value={value}
        isMulti={isMulti}
        closeMenuOnSelect={!isMulti} // 非多选时选择后关闭菜单，多选时保持打开
        menuIsOpen={menuOpen}
        onMenuClose={handleMenuClose}
        onMenuOpen={() => setMenuOpen(true)}
        hideSelectedOptions={hideSelectedOptions}
        options={options}
        loadOptions={loadOptions}
        loadOptionsOnMenuOpen={false}
        onChange={(newValue) => onChange(newValue)}
        placeholder={placeholder}
        getOptionValue={(option) => option.value}
        backspaceRemovesValue={backspaceRemovesValue}
        getOptionLabel={(option) => option.label}
        isClearable={isClearable}
        isOptionDisabled={isOptionDisabled}
        components={{
          Option,
          SingleValue,
          Menu: (props) => <Menu {...props} ref={dropDownRef} />, // 绑定ref到菜单容器
          IndicatorSeparator: () => <span />,
          DropdownIndicator: () =>
            isLoading ? (
              <Box className="loading-bar-wrapper">
                <Loader isCircular size={15} />
              </Box>
            ) : (
              showDropdownIcon && <div className="caret-icon">{<ArrowDropDownIcon />}</div>
            ),
          ...(!showMenuList && { MenuList: () => null }),
        }}
      />
    </AsyncSelectFieldStyled>
  );
};

说明 #

• 自定义Menu组件时使用forwardRef，确保能获取到react-select菜单的真实DOM节点
• 移除了原handleMenuClose中强制打开多选菜单的逻辑，改为由closeMenuOnSelect控制选择后的菜单状态，外部点击则统一关闭菜单
• 外部点击监听的useEffect改为空依赖，避免因menuOpen状态变化重复绑定/移除事件

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