Angular13+PrimeNG13：p-accordion内p-autocomplete空格键失效求助

问题原因 #

PrimeNG的p-accordion组件默认监听空格键来触发面板的展开/收起，当p-autocomplete嵌套在其中时，输入空格的事件会向上冒泡被p-accordion捕获，导致无法在输入框中输入空格，反而触发面板切换。

解决方案 #

方案1：阻止Autocomplete输入框的空格事件冒泡 #

通过监听p-autocomplete输入框的keydown事件，按下空格键时阻止事件冒泡，避免被上层p-accordion捕获。

组件模板代码

<p-accordion>
  <p-accordionTab header="示例面板">
    <p-autocomplete 
      [(ngModel)]="selectedItem" 
      [suggestions]="items" 
      (keydown.onInput)="onAutocompleteKeydown($event)"
      field="name">
    </p-autocomplete>
  </p-accordionTab>
</p-accordion>

组件类代码

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  selectedItem: any;
  items = [
    { name: 'Item 1' },
    { name: 'Item 2 with space' },
    { name: 'Item 3' }
  ];

  onAutocompleteKeydown(event: KeyboardEvent): void {
    if (event.key === ' ') {
      event.stopPropagation();
    }
  }
}

方案2：全局控制Accordion的键盘事件响应 #

如果多个p-autocomplete嵌套在p-accordion中，可通过监听p-accordion的键盘事件，判断当前焦点是否在p-autocomplete输入框内，再决定是否响应空格事件。

组件模板代码

<p-accordion (keydown)="onAccordionKeydown($event)">
  <p-accordionTab header="示例面板">
    <p-autocomplete 
      [(ngModel)]="selectedItem" 
      [suggestions]="items" 
      field="name"
      #autoComplete>
    </p-autocomplete>
  </p-accordionTab>
</p-accordion>

组件类代码

import { Component, ViewChild } from '@angular/core';
import { AutoComplete } from 'primeng/autocomplete';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  selectedItem: any;
  items = [
    { name: 'Item 1' },
    { name: 'Item 2 with space' },
    { name: 'Item 3' }
  ];
  @ViewChild('autoComplete') autoComplete!: AutoComplete;

  onAccordionKeydown(event: KeyboardEvent): void {
    if (event.key === ' ') {
      const inputElement = this.autoComplete.inputViewChild.nativeElement;
      if (document.activeElement === inputElement) {
        event.stopPropagation();
      }
    }
  }
}

说明 #

方案1针对单个p-autocomplete做精准处理，代码更简洁；方案2适合批量处理多个嵌套组件的场景。两种方案都能保证空格键在p-autocomplete中正常输入，同时不影响p-accordion的其他键盘操作。

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