无法专注于 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);  }

Answer 1

您需要event.preventDefault()禁用浏览器上的默认选项卡行为，请尝试以下操作：

onTabPress(event) {

    var that = this;

    setTimeout(() => {

      that.entitySelector.open();

      // that.selectEntityBtn.nativeElement.focus();

      document.getElementById("selectEntityBtn").focus();

    }, 1);

    event.preventDefault();

}

Answer 2

请尝试以下操作：

onTabPress($event) {

  var that = this;

  $event.preventDefault();

  setTimeout(() => {

    that.entitySelector.open();

    // that.selectEntityBtn.nativeElement.focus();

    document.getElementById("selectEntityBtn").focus();

  }, 1);

}

我认为您需要防止默认选项卡行为 :) 您需要传递该事件。