Ag-Grid文本编辑器点击外部未关闭问题排查与求助

现象描述 #

配置agTextCellEditor作为列的文本编辑器，同时设置stopEditingWhenCellsLoseFocus: true，但点击网格下方的页面空白区域时，编辑器并未触发关闭逻辑。

问题根源 #

调试Ag-Grid源码后发现，点击网格下方区域实际触发了<html>元素的点击事件，而ag-grid/grid-community-modules/core/src/ts/widgets/popupService.ts中的isElementWithinCustomPopup方法存在逻辑缺陷：

public isElementWithinCustomPopup(el: HTMLElement): boolean {
    const eDocument = this.gridOptionsService.getDocument();
    while (el && el !== eDocument.body) {
        if (el.classList.contains('ag-custom-component-popup') || el.parentElement === null) {
            return true;
        }
        el = el.parentElement;
    }

    return false;
}

当el为<html>元素时，其parentElement为null，方法直接返回true，导致Ag-Grid误判为点击了自定义弹窗组件，因此不执行编辑器关闭操作，但实际并未使用任何自定义编辑器。

当前配置信息 #

HTML模板 #

<h3>My Page</h3>
<div>
    <ag-grid-angular
        class="ag-theme-fresh"
        [gridOptions]="gridOptions">
    </ag-grid-angular>
</div>

Angular组件网格配置 #

@Component({
    selector: 'my-component',
    templateUrl: './my.component.html',
    styleUrls: ['./my.component.scss']
})
export class MyComponent {
    public gridOptions: GridOptions = {
        rowHeight: 35,
        headerHeight: 35,
        rowMultiSelectWithClick: true,
        suppressCellFocus: true,
        suppressMovableColumns: true,
        suppressMenuHide: true,
        suppressContextMenu: true,
        stopEditingWhenCellsLoseFocus: true,
        onCellEditingStopped: this.updateData(),
        defaultColDef: {
            sortable: true,
            filter: true,
            resizable: true
        },
        columnDefs: [ {
            field: 'cohort',
            width: 100,
            editable: true,
            cellEditor: 'agTextCellEditor',
            cellEditorPopup: true,
            cellEditorPopupPosition: 'under'
        } ],
        onGridReady: (event) => this.loadDataFromApi(event),
    };

    private loadDataFromApi(event) {
       // 获取数据并调用event.api.setRowData 
    }

    private updateData() {
        // 调用API更新数据
    }
}

求助 #

目前想到的临时解决方案是添加覆盖层捕获点击事件，但认为这属于Ag-Grid的代码Bug（需在循环中额外判断el是否为<html>元素）。想咨询是否有其他配置方式可以规避该问题？

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