Ag grid ag grid的agSelectCellEditor无法正确渲染单元格

我使用agSelectCellEditor在特定列单元格中添加下拉菜单。 这是列定义：

{
      headerName: "Rattachement",
      field: "rattachement",
      editable: true,
      headerTooltip:
        "Choisissez l'entité de rattachement parmi les choix présents dans la liste déroulante",
      cellEditor: "agSelectCellEditor",
      cellEditorParams: {
        values: [
          "",
          "Audit",
          "RA",
          "Consulting",
          "FA",
          "Tax&Legal",
          "ICS",
          "Taj"
        ]
      }
    }

以下是ag grid渲染它的方式： 我必须双击它才能使下拉列表以这种方式显示： 然后我可以选择任何可用的选项。 正如您所注意到的，这是非常糟糕的渲染，可能会导致用户感到困惑，无法使用我正在构建的工具

所以我的问题是：

有没有办法让ag grid从一开始就显示下拉菜单，而不必双击单元格，以便用户真正知道该做什么？ 谢谢

---

PS：我不想使用自定义单元格渲染器，因为单元格中的选项依赖于其他变量，如果我选择使用customcellRenderer实现下拉列表，整个过程可能会变得混乱，我在其他列中使用了customcellRenderer，但它不会给我带来任何上述问题，这与我遇到的问题相同：。 默认情况下，AgGrid不显示下拉列。如果您希望将其显示为下拉列表，则必须使用cellRenderer仅显示图像以通知用户这是下拉列表

双击编辑可以更改为单击或不单击编辑，该选项可用。 设置columndef选项singleClickEdit:true

希望这有帮助

 var columnDefs = [
        {field: 'name', width: 100},
        {
            field: 'gender',
            width: 90,
            cellRenderer: 'genderCellRenderer',
            cellEditor: 'agRichSelectCellEditor',
            singleClickEdit : true,
            cellEditorParams: {
                values: ['Male', 'Female'],
            }
        },]

var gridOptions = {
    components: {
        'genderCellRenderer': GenderCellRenderer
    },
    columnDefs: columnDefs,
}

    function GenderCellRenderer() {
    }

    GenderCellRenderer.prototype.init = function (params) {
        this.eGui = document.createElement('span');
        this.eGui.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 18 18"><path d="M5 8l4 4 4-4z"/></svg>' + params.value;
    };

    GenderCellRenderer.prototype.getGui = function () {
        return this.eGui;
    };