p-multiSelect隐藏header后键盘无法访问的修复方案咨询

方法1：手动为触发元素添加键盘支持 #

当showHeader=false时，组件原生的可聚焦容器被移除，可通过模板引用变量手动为下拉触发按钮绑定键盘事件：

<p-multiSelect #multiSelect [showHeader]="false" ...></p-multiSelect>

import { ViewChild, AfterViewInit } from '@angular/core';
import { MultiSelect } from 'primeng/multiselect';

export class YourComponent implements AfterViewInit {
  @ViewChild('multiSelect') multiSelect!: MultiSelect;

  ngAfterViewInit() {
    const triggerBtn = this.multiSelect.el.nativeElement.querySelector('.p-multiselect-trigger');
    if (triggerBtn) {
      // 设置tabindex让元素可被键盘聚焦
      triggerBtn.setAttribute('tabindex', '0');
      // 绑定Enter/Space键触发下拉面板
      triggerBtn.addEventListener('keydown', (e: KeyboardEvent) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          this.multiSelect.toggle();
        }
      });
      // 绑定Escape键关闭面板并回归聚焦
      document.addEventListener('keydown', (e: KeyboardEvent) => {
        if (e.key === 'Escape' && this.multiSelect.panelVisible) {
          this.multiSelect.hide();
          triggerBtn.focus();
        }
      });
    }
  }
}

方法2：自定义空头部保留原生可访问结构 #

不设置showHeader=false，而是用空模板替代默认头部，既隐藏搜索框，又保留组件原生的键盘导航逻辑：

<p-multiSelect [showHeader]="true">
  <ng-template pTemplate="header">
    <!-- 空模板仅维持头部容器结构 -->
  </ng-template>
</p-multiSelect>

方法3：用CSS隐藏搜索框保留头部结构 #

保留showHeader=true，通过样式隐藏头部内的搜索输入框，视觉上移除搜索功能但不破坏可访问性结构：

<p-multiSelect [showHeader]="true" class="no-search-multiselect"></p-multiSelect>

.no-search-multiselect .p-multiselect-header .p-inputwrapper {
  display: none;
}

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