无法专注于 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) {&nbsp; &nbsp; var that = this;&nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; that.entitySelector.open();&nbsp; &nbsp; &nbsp; // that.selectEntityBtn.nativeElement.focus();&nbsp; &nbsp; &nbsp; document.getElementById("selectEntityBtn").focus();&nbsp; &nbsp; }, 1);&nbsp; &nbsp; event.preventDefault();}

Answer 2

请尝试以下操作：onTabPress($event) {&nbsp; var that = this;&nbsp; $event.preventDefault();&nbsp; setTimeout(() => {&nbsp; &nbsp; that.entitySelector.open();&nbsp; &nbsp; // that.selectEntityBtn.nativeElement.focus();&nbsp; &nbsp; document.getElementById("selectEntityBtn").focus();&nbsp; }, 1);}我认为您需要防止默认选项卡行为 :) 您需要传递该事件。