如何自定义Angular Kendo多选列表实现弹出层独立搜索栏

问题根因 #

你遇到的输入框无法聚焦、手动调用聚焦方法弹出层立刻关闭的问题，核心原因是Kendo MultiSelect弹出层默认内置焦点守卫逻辑：所有不在弹出层初始焦点白名单内的元素触发焦点事件时，会自动判定为「点击弹出层外部」，直接执行关闭逻辑。直接通过HeaderTemplateDirective插入的输入框默认不在白名单内，必然触发该逻辑。

完整实现步骤 #

组件模板配置 #

先禁用组件原生筛选栏、设置默认输入区只读，同时通过自定义模板实现头部搜索框、带勾选框的列表项，注意给搜索框容器绑定mousedown事件阻止冒泡：

<kendo-multiselect
  #multiSelectRef
  [data]="filteredList"
  [value]="selectedItems"
  [filterable]="false"
  [readonly]="true"
  textField="label"
  valueField="id"
  (valueChange)="handleValueChange($event)"
  (open)="handlePopupOpen()"
>
  <!-- 弹出层头部搜索框 -->
  <ng-template kendoMultiSelectHeaderTemplate>
    <div class="search-box-wrap" (mousedown)="$event.stopPropagation()">
      <kendo-textbox
        #searchInputRef
        placeholder="搜索选项"
        [(value)]="searchKeyword"
        (valueChange)="runFilter()"
        clearButton
      ></kendo-textbox>
    </div>
  </ng-template>

  <!-- 带勾选框的列表项 -->
  <ng-template kendoMultiSelectItemTemplate let-option>
    <div class="list-item">
      <input 
        type="checkbox" 
        class="k-checkbox k-checkbox-md" 
        [checked]="checkSelected(option)" 
        (click)="toggleOption(option)"
      >
      <span>{{option.label}}</span>
    </div>
  </ng-template>
</kendo-multiselect>

逻辑层代码 #

通过@ViewChild获取组件实例，在弹出层完成渲染后触发搜索框聚焦，同时实现筛选、多选逻辑：

import { Component, ElementRef, ViewChild } from '@angular/core';
import { MultiSelectComponent } from '@progress/kendo-angular-dropdowns';

@Component({
  selector: 'app-custom-multiselect',
  templateUrl: './custom-multiselect.component.html',
  styles: [`
    .search-box-wrap {
      padding: 8px;
      border-bottom: 1px solid #e0e0e0;
      position: sticky;
      top: 0;
      background: #fff;
      z-index: 10;
    }
    .list-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 0;
      cursor: pointer;
    }
    /* 强制下拉图标显示在组件右侧 */
    :host ::ng-deep .k-multiselect .k-select {
      order: 2;
    }
    :host ::ng-deep .k-multiselect .k-input-values {
      order: 1;
      flex-grow: 1;
    }
  `]
})
export class CustomMultiselectComponent {
  @ViewChild('multiSelectRef') multiSelect!: MultiSelectComponent;
  @ViewChild('searchInputRef') searchInput!: ElementRef;

  // 替换为实际业务全量选项数据
  rawOptionList: Array<{id: string|number, label: string}> = [];
  filteredList: Array<{id: string|number, label: string}> = [];
  selectedItems: Array<{id: string|number, label: string}> = [];
  searchKeyword = '';

  ngOnInit() {
    this.filteredList = [...this.rawOptionList];
  }

  handlePopupOpen() {
    // 每次打开弹窗重置搜索状态
    this.searchKeyword = '';
    this.filteredList = [...this.rawOptionList];
    // 等弹出层DOM渲染完成后再聚焦，避开焦点守卫检测
    setTimeout(() => {
      this.searchInput.nativeElement.focus();
    }, 0);
  }

  runFilter() {
    const keyword = this.searchKeyword.trim().toLowerCase();
    this.filteredList = keyword 
      ? this.rawOptionList.filter(item => item.label.toLowerCase().includes(keyword))
      : [...this.rawOptionList];
  }

  checkSelected(option: {id: string|number}) {
    return this.selectedItems.some(item => item.id === option.id);
  }

  toggleOption(option: {id: string|number, label: string}) {
    if (this.checkSelected(option)) {
      this.selectedItems = this.selectedItems.filter(item => item.id !== option.id);
    } else {
      this.selectedItems = [...this.selectedItems, option];
    }
  }

  handleValueChange(values: Array<{id: string|number, label: string}>) {
    this.selectedItems = values;
  }
}

关键注意点 #

• 搜索框父容器必须绑定(mousedown)="$event.stopPropagation()"：Kendo弹出层的外部点击检测绑定在mousedown事件上，阻止冒泡后点击输入框不会被判定为弹窗外点击，从根源避免弹窗异常关闭。
• 聚焦逻辑必须加setTimeout延迟：弹出层打开事件触发时，弹层DOM还未完成挂载、焦点守卫未初始化完成，延迟到下一个事件循环执行聚焦不会触发关闭逻辑。
• 下拉图标右对齐不需要修改组件内置结构，通过CSSorder属性调整渲染顺序即可，兼容组件原生行为。
• 不要在搜索框的focus、input事件中手动触发弹出层的打开/关闭方法，避免打乱组件内置焦点状态。

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