按 Tab 时跳过 Primeng 自动完成中的下拉按钮

Question

我正在使用 primeng 在我的 Angular 反应形式中使用带有下拉菜单的多个自动完成功能。自动完成的形式如下：

<p-autoComplete
  inputId="myInput"
  class="p-fluid"
  [dropdown]="true"
  formControlName="myFormControl"
  (completeMethod)="filter($event.query)"
  [suggestions]="suggestions"
  [forceSelection]="true"
  [showClear]="true"
  (onClear)="myFormControl.reset()"
  appendTo="body">
</p-autoComplete>

这按预期工作。但是，当使用

tab

键从一个输入跳转到下一个输入时，它还会聚焦“打开下拉菜单”按钮。我想跳过聚焦此按钮并直接跳到下一个输入字段。

我无法在

[tabindex]="-1"

元素上使用

p-autocomplete

，因为这样它只会跳过整个自动完成输入，但我只想跳过下拉按钮。

有什么办法可以实现这一点吗？谢谢。

Answer 1

没有内置属性可以执行此操作，因此您需要创建一个自定义指令来执行此操作。它看起来像下面这样，我们找到按钮并使用

renderer2

和

elementRef

将选项卡索引更新为 -1

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[noButtonFocus]',
  standalone: true,
})
export class NoButtonFocusDirective {
  constructor(private element: ElementRef, private renderer: Renderer2) {}

  ngAfterViewInit() {
    const dropdownButton = this.element.nativeElement.querySelector(
      '.p-autocomplete-dropdown'
    );
    if (dropdownButton) {
      this.renderer.setAttribute(dropdownButton, 'tabindex', '-1');
    }
  }
}

父组件：

<div class="card flex justify-content-center">
  <p-autoComplete
    noButtonFocus
    [(ngModel)]="selectedCountry"
    [dropdown]="true"
    [suggestions]="filteredCountries"
    (completeMethod)="filterCountry($event)"
    field="name"
  />
</div>

Stackblitz 演示