Kendo Angular Combobox更新后picker-button点击事件失效求助

核心原因 #

Kendo与Angular版本更新后，Combobox的内部DOM结构或样式层级发生变化，导致绝对定位的picker-button被Combobox的内部元素（如输入框容器、下拉触发器）遮挡，无法接收点击事件。

具体修复方案 #

1. 提升按钮的层级优先级（最可能解决问题） #

修改picker-button的CSS，添加z-index属性确保它在Combobox之上：

.picker-button {
    position: absolute;
    top: 6px;
    right: 32px;
    cursor: pointer;
    user-select: none;
    outline: none;
    display: flex;
    flex: 0 0 auto;
    align-content: center;
    justify-content: center;
    width: 24px;
    height: 20px;
    background-size: 20px 20px;
    background: url($assets-dir + '/picker_multiple_blue.svg') 3px 2px no-repeat transparent;
    z-index: 100; /* 新增：确保层级高于Combobox内部元素 */

    &.disabled {
        background: url($assets-dir + '/picker_multiple_grey.svg') 3px 2px no-repeat transparent;
    }
}

2. 阻止事件冒泡（辅助修复） #

如果层级调整后仍有问题，给按钮的点击事件添加事件阻止传播，避免Combobox的父元素拦截事件：

<div
    class="picker-button"
    *ngIf="values.length < maxCardinality"
    (click)="handleClickReferencePicker($event); $event.stopPropagation()"></div>

3. 调整Combobox的挂载位置（可选） #

更新后的Kendo Combobox可能默认将下拉框挂载在当前容器内，导致静态状态下内部元素覆盖按钮。可以通过appendTo属性将下拉框挂载到body，减少容器内的层级冲突：

<kendo-combobox #selectBox
                [data]="connectionCandidates$ | async"
                [textField]="_id"
                [valueField]="name"
                [filterable]="true"
                [placeholder]="'Search...'"
                (selectionChange)="handleComboBoxValueChange($event)"
                (filterChange)="handleFilter($event)"
                [appendTo]="'body'" <!-- 新增：下拉框挂载到body -->
                class="reference-combobox">
    <!-- 原有模板内容 -->
</kendo-combobox>

4. 验证按钮的可点击区域 #

确保按钮的宽高设置正确，没有被其他元素裁剪。可以临时给按钮添加背景色（如background-color: rgba(255,0,0,0.5)）测试实际可点击范围，调整top/right定位值确保按钮完全暴露。

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