MUI v5 DataGrid自定义过滤器菜单挂载后立即关闭（失焦）问题求助

这个问题我之前也碰到过，核心原因有两个：一是点击MenuItem时事件冒泡触发了过滤器面板的关闭逻辑，二是自定义组件没有正确调用applyValue通知DataGrid更新筛选条件。下面是修复后的完整代码和关键说明：

修复后的自定义过滤器组件 #

function VisibilityValue(props) {
  const { item, applyValue, focusElementRef } = props;
  const ratingRef = React.useRef(null);

  React.useImperativeHandle(focusElementRef, () => ({
    focus: () => {
      const targetInput = ratingRef.current?.querySelector(`input[value="${item.value || ""}"]`);
      if (targetInput) targetInput.focus();
    },
  }));

  const handleSelectChange = (event) => {
    // 通知DataGrid应用新的筛选值
    applyValue({ ...item, value: event.target.value });
    // 阻止事件冒泡，避免触发过滤器面板的关闭逻辑
    event.stopPropagation();
  };

  return (
    <Select 
      label='visibility' 
      ref={ratingRef}
      value={item.value || ""} // 同步选中状态与当前筛选值
      onChange={handleSelectChange}
    >
      <MenuItem value='public'>Public</MenuItem>
      <MenuItem value='private'>Private</MenuItem>
    </Select>
  );
}

关键修复点解释 #

1. 添加onChange事件处理：
   必须调用applyValue方法把选中的新值传递给DataGrid，否则筛选条件不会更新，DataGrid也无法感知到你的操作，后续面板状态会出现异常。

2. 阻止事件冒泡：
   点击MenuItem时，事件会向上冒泡到DataGrid的过滤器面板容器，而面板默认会监听点击事件来关闭自身。通过event.stopPropagation()可以阻止这个事件传递，避免面板意外关闭。

3. 同步Select的value属性：
   给Select设置value={item.value || ""}，确保下拉框的选中状态和当前的筛选值保持一致，提升用户操作的连贯性。

你的运算符配置和列配置是没问题的，只需要确保自定义组件的上述修复到位，就能解决面板自动关闭的问题。

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