Vue3+AG Grid社区版列菜单异常：文本过滤器不弹出且网格闪烁

问题现象 #

使用Vue3搭配ag-grid-community（^{29.2.0）、ag-grid-vue3（}29.2.0）开发时，点击列菜单图标后，文本过滤器菜单无法弹出，同时整个网格开始闪烁，控制台无任何报错。该问题在Chrome和Edge浏览器中均出现。

项目依赖 #

• "ag-grid-community": "^29.2.0"
• "ag-grid-vue3": "^29.2.0"
• ...
• "vue": "^3.2.47"
• "vue-router": "^4.1.6"
• "vuetify": "^3.1.13"

本地测试代码 #

<template>
  <ag-grid-vue
    style="width: 500px; height: 200px"
    class="ag-theme-alpine"
    :columnDefs="columnDefs"
    :rowData="rowData"
  >
  </ag-grid-vue>
</template>

<script>
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";
import { AgGridVue } from "ag-grid-vue3";

export default {
  name: "App",
  components: {
    AgGridVue,
  },
  setup() {
    return {
      columnDefs: [
        { headerName: "Make", field: "make", filter: true },
        { headerName: "Model", field: "model" },
        { headerName: "Price", field: "price" },
      ],
      rowData: [
        { make: "Toyota", model: "Celica", price: 35000 },
        { make: "Ford", model: "Mondeo", price: 32000 },
        { make: "Porsche", model: "Boxster", price: 72000 },
      ],
    };
  },
};
</script>

排查情况 #

• 尝试跳过ag-grid-vue3直接操作DOM实现，问题仍然存在；
• AG Grid社区版原生支持文本过滤器功能，但当前环境中无法正常触发；
• 在沙箱环境中使用Vue ^3.0.0-0运行类似代码可正常工作，因此怀疑是Vue版本差异导致该问题。

沙箱可运行测试代码 #

<template>
  <ag-grid-vue
    style="width: 500px; height: 200px"
    class="ag-theme-alpine"
    :columnDefs="columnDefs"
    :rowData="rowData"
    :defaultColDef="defaultColDef"
    rowSelection="multiple"
    animateRows="true"
  >
  </ag-grid-vue>
</template>

<script>
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";
import { AgGridVue } from "ag-grid-vue3";

export default {
  name: "App",
  components: {
    AgGridVue,
  },
  setup() {
    return {
      columnDefs: [
        { headerName: "Make", field: "make" },
        { headerName: "Model", field: "model" },
        { headerName: "Price", field: "price" },
      ],
      rowData: [
        { make: "Toyota", model: "Celica", price: 35000 },
        { make: "Ford", model: "Mondeo", price: 32000 },
        { make: "Porsche", model: "Boxter", price: 72000 },
      ],
      defaultColDef : {
        sortable: true,
        filter: true,
        flex: 1
      }
    };
  },
};
</script>

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