Kendo UI Popup实现点击外部关闭时anchor始终为undefined问题求助

核心问题1：点击事件冒泡导致逻辑冲突 #

你点击按钮触发弹窗打开的事件会向上冒泡到document层，触发全局的document:click监听，此时弹窗刚触发显示还未完成渲染，判断逻辑直接执行就会出现contains返回false的问题，直接修复方法是阻止按钮点击事件冒泡：
修改HTML按钮绑定逻辑：

<button  #anchor (click)="$event.stopPropagation(); onToggle()" mat-raised-button color="list-button">
    <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
        <fa-icon [icon]="faFilter" class="fa-sm"></fa-icon>
        <div>Filter</div>
    </div>
</button>

同时可以给全局点击监听增加打开状态判断，避免弹窗未打开时执行无意义的判断逻辑：

@HostListener("document:click", ["$event"])
public documentClick(event: any): void {
    // 弹窗未打开时直接跳过判断
    if (!this.show) return;
    if (!this.contains(event.target)) {
        this.onToggle(false);
    }
}

核心问题2：anchor变量始终为undefined的修复 #

1. 若#anchor对应的按钮没有被*ngIf等结构型指令包裹，属于页面静态渲染元素，给ViewChild增加static: true配置，确保组件初始化时就能拿到引用：

@ViewChild("anchor", { read: ElementRef, static: true}) public anchor: ElementRef;

2. 检查是否混淆了锚点变量：你当前kendo-popup绑定的[anchor]="inputAnchor"，如果inputAnchor是你实际使用的锚点元素，需要在contains方法中加入inputAnchor的元素判断逻辑，否则点击弹窗绑定的锚点区域会被判定为外部点击：

private contains(target: any): boolean {
    const inTriggerBtn = this.anchor?.nativeElement?.contains(target) ?? false;
    // 如果你弹窗绑定的是inputAnchor，增加对应判断
    const inPopupAnchor = this.inputAnchor?.nativeElement?.contains(target) ?? false;
    const inPopup = this.popup?.nativeElement?.contains(target) ?? false;
    return inTriggerBtn || inPopupAnchor || inPopup;
}

核心问题3：popup元素引用时序问题 #

你当前kendo-popup使用*ngIf="show"控制渲染，只有弹窗打开时才会插入DOM，所以popup的ViewChild默认static: false即可，Angular会在弹窗渲染后自动更新引用。如果还是偶现判断失效，可以给全局点击逻辑加微任务延迟，等待DOM渲染完成后再执行判断：

@HostListener("document:click", ["$event"])
public documentClick(event: any): void {
    if (!this.show) return;
    // 等待DOM渲染完成后再执行判断
    setTimeout(() => {
        if (!this.contains(event.target)) {
            this.onToggle(false);
        }
    }, 0);
}

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