无法专注于 Angular @ng-select 中的自定义提交按钮

Question

我正在使用 ng-select 库。在多选中，选中复选框后，我需要一个自定义提交按钮。

一切正常，但由于键盘导航非常重要，我想重点关注 TAB 键上的提交按钮。

这是我的代码：

模板：

  <ng-container >
    <ng-select #entitySelector (remove)="onEntityChange($event)" [items]="people$ | async" [multiple]="true" bindLabel="name" [closeOnSelect]="false" bindValue="name" [(ngModel)]="tempSelectList"
      [virtualScroll]="true" placeholder="Search People"  (keydown.Tab)="onTabPress($event)" >
      <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
        <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected" /> {{item.name}}
      </ng-template>
      <ng-template ng-footer-tmp>
        <input type="submit" id="selectEntityBtn" value="Select" #selectEntityBtn class="btn btn-default select-button" (click)="saveData()"/>
      </ng-template>
    </ng-select>
  </ng-container>

TS:

  onTabPress() {
    var that = this;
    setTimeout(() => {
      that.entitySelector.open();
      // that.selectEntityBtn.nativeElement.focus();
      document.getElementById("selectEntityBtn").focus();
    }, 1);
  }

Stackbiltz link

请帮帮我:)

Answer 1

您需要 event.preventDefault() 来禁用浏览器上的默认选项卡行为，所以试试这个：

onTabPress(event) {
    var that = this;
    setTimeout(() => {
      that.entitySelector.open();
      // that.selectEntityBtn.nativeElement.focus();
      document.getElementById("selectEntityBtn").focus();
    }, 1);
    event.preventDefault();
}

Stackblitz working demo

Answer 2

请尝试以下操作：

onTabPress($event) {
  var that = this;

  $event.preventDefault();

  setTimeout(() => {
    that.entitySelector.open();
    // that.selectEntityBtn.nativeElement.focus();
    document.getElementById("selectEntityBtn").focus();
  }, 1);
}

我认为您需要防止默认选项卡行为 :) 您将需要通过该活动。

问候

无法专注于 Angular @ng-select 中的自定义提交按钮

Unable to focus on a custom submit button in Angular @ng-select

javascript

typescript

angular-ngselect

angular