侧边栏点击外部关闭功能嵌套MUI自定义选择组件时失效

问题背景 #

React项目中，侧边栏CustomizeComponentSidebar内置MUI多选Select组件，使用useRef监听点击外部关闭侧边栏时，点击Select的下拉菜单会被判定为外部点击，触发侧边栏关闭；改用MUI的ClickAwayListener也存在同样问题。

问题原因 #

MUI的Select下拉菜单默认渲染到body标签下，不属于侧边栏的DOM层级，因此ref.current.contains(event.target)无法识别点击事件来自下拉菜单，误判为外部点击。

解决方案 #

方法一：让下拉菜单渲染在侧边栏DOM树内 #

通过配置Select组件的MenuProps.PopperProps.container，将下拉菜单挂载到侧边栏的DOM节点下，这样点击下拉菜单时会被判定为侧边栏内部点击。

1. 确保侧边栏容器有可用的ref：

const sidebarRef = useRef(null);

return (
  <div ref={sidebarRef} className="position-absolute">
    <CustomizeComponentSidebar props={props} />
  </div>
);

2. 在SelectField组件中，给Select的MenuProps添加PopperProps配置（需将sidebarRef传递到SelectField组件中）：

return (
  <div>
    <FormControl sx={{ m: 1, width: 300 }}>
      <InputLabel id="demo-multiple-name-label">Select</InputLabel>
      <Select
        labelId="demo-multiple-name-label"
        id="demo-multiple-name"
        multiple={props.configuration.multipleOptions}
        value={getValue()}
        onChange={handleChange}
        input={<OutlinedInput label="Option" />}
        MenuProps={{
          PopperProps: {
            container: sidebarRef.current,
          },
        }}
      >
        {options.map((option) => (
          <MenuItem
            key={option}
            value={option}
            style={getStyles(option, optionName, theme)}
          >
            {option}
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  </div>
);

方法二：在点击外部逻辑中排除下拉菜单 #

通过检测点击目标是否属于MUI下拉菜单的DOM元素，避免误触发关闭逻辑。修改handleClickOutside函数：

const handleClickOutside = (event) => {
  // 检测点击目标是否在MUI下拉菜单内
  const isInSelectMenu = event.target.closest('.MuiMenu-root') || event.target.closest('.MuiPopover-root');
  
  // 仅当点击不在侧边栏内，且不在下拉菜单内时，关闭侧边栏
  if (ref.current && !ref.current.contains(event.target) && !isInSelectMenu) {
    resetSidebar();
  }
};

useEffect(() => {
  document.addEventListener("click", handleClickOutside, true);
  return () => document.removeEventListener("click", handleClickOutside, true);
}, [customizeComponentMenu.open]);

注意：方法二中的类名（.MuiMenu-root、.MuiPopover-root）可能随MUI版本变化，需根据项目实际使用的MUI版本调整。

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