Невозможно сфокусироваться на пользовательской кнопке отправки в 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

Answer 2

Пожалуйста, попробуйте следующее:

onTabPress($event) {
  var that = this;

  $event.preventDefault();

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

Я думаю, вам нужно будет предотвратить поведение по умолчанию с вкладками :) Вам нужно будет пропустить событие.

regards