如何阻止点击Select选项时关闭MUI Data Grid自定义筛选弹窗

问题原因 #

MUI的Select组件默认会通过Portal将下拉菜单挂载到body节点下，而Data Grid的筛选弹窗自带ClickAwayListener，点击Select下拉选项时会被判定为点击了弹窗外部，进而触发弹窗关闭。

解决方案一：禁用Select的Portal（推荐） #

给自定义筛选组件中的两个Select添加disablePortal={true}属性，让下拉菜单渲染在筛选弹窗内部，这样点击下拉选项时就不会触发外部点击判定：

// 筛选列的Select
<Select
  disablePortal={true}
  value={filterColumn}
  onChange={handleColumnChange}
  fullWidth
  sx={{ mb: 1 }}
>
  {columns.map((col) => (
    <MenuItem key={col.field} value={col.field}>
      {col.headerName}
    </MenuItem>
  ))}
</Select>

// 筛选类型的Select
<Select
  disablePortal={true}
  value={filterType}
  onChange={handleTypeChange}
  fullWidth
  sx={{ mb: 1 }}
>
  {filterOptions.map((opt) => (
    <MenuItem key={opt.value} value={opt.value}>
      {opt.label}
    </MenuItem>
  ))}
</Select>

同时给筛选组件的外层容器添加overflow: visible样式，确保下拉菜单能正常超出弹窗显示：

<Box sx={{ p: 2, overflow: 'visible' }}>
  {/* 你的筛选表单内容 */}
</Box>

解决方案二：自定义筛选弹窗的点击外部逻辑 #

如果需要保留Select的Portal挂载方式，可以通过Data Grid的filterPanelProps自定义ClickAwayListener的触发逻辑，忽略Select下拉菜单的点击：

<DataGrid
  // 其他原有属性
  filterPanelProps={{
    ClickAwayListenerProps: {
      onClickAway: (event) => {
        // 检查点击目标是否属于MUI的菜单/弹出层
        const isMuiMenu = event.target.closest('.MuiMenu-root, .MuiPopover-root');
        if (!isMuiMenu) {
          // 仅当点击非菜单区域时，触发弹窗关闭
          const filterPanel = document.querySelector('.MuiDataGrid-filterPanel');
          if (filterPanel) {
            filterPanel.dispatchEvent(new Event('close'));
          }
        }
      }
    }
  }}
/>

验证效果 #

添加上述修改后，点击Select下拉选项时，筛选弹窗不会再被意外关闭，同时下拉菜单能正常交互。

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