如何在弹出窗口打开时立即将选项卡焦点放在弹出窗口上，而不是将焦点放在先前选择的值上

我使用了自定义弹出模式来接收用户的确认消息。这里我有一些基于焦点的输入字段，如果必须从用户处获取任何验证/确认消息，则会打开弹出消息。当弹出窗口打开时，选项卡焦点将位于背景中已选择的值上，而不是弹出窗口上，如果我使用选项卡，它将转到后台中的下一个输入字段，而不是将焦点放在弹出窗口上。 我该如何处理这个问题？ 这里基于选项卡焦点到按钮enter/spacebar 它接受该特定按钮的事件。 我使用了一个指令来处理键盘中“ESC”上的按键。我想在这里做这些事情，但不知道如何让它发挥作用。 1.默认情况下，如果只有一个按钮，则选项卡焦点必须位于“确定”按钮上，如果有“确定”和“取消”两个按钮，则选项卡焦点必须位于“确定”按钮上。 2.通过使用选项卡/鼠标，我必须能够在按钮之间切换。 需要帮助。

DEMO: DEMO https://stackblitz.com/edit/angular-qjoydv?file=src%2Fapp%2Fapp.component.ts

为了获取弹出窗口，我使用了服务文件：

服务.ts：

activate: (header?: string,message?: string, ok?: string,cancel?:boolean) => Promise<boolean>;

HTML:

 <input type="text" class="form-control" placeholder="Group Code" name="groupCode"
               name="groupCode" (blur)="tabOpen()">

Ts:

  tabOpen() {
    this.notificationService.activate("Validation Message", "First POP UP? ", "Yes").then(responseOK => {
        if (responseOK) { }
      });
  }

基于此blurout我正在调用该服务并显示弹出窗口。一旦弹出窗口打开，我希望选项卡焦点位于该弹出窗口上，无论背景屏幕上有什么弹出窗口。但关键功能应该仅适用于弹出窗口存在时，当弹出窗口关闭时，再次控制返回到背景上的特定字段并相应地起作用。

我可以通过向弹出窗口组件文件添加一个函数并在弹出窗口打开时调用相同的函数来完成这项工作。

TS:

public focusFirstFocusableChildPoC = (id: string): void => {
    setTimeout(() => {
      const contentPane = document.getElementById(id);

      if (contentPane) {
        //  alert(contentPane)
        const focusableElements = contentPane.querySelectorAll(this.focusableList),
          firstFocusable = <HTMLElement>focusableElements[0];

        window.setTimeout(function () {
          // Kick this to the back of the line with the 'ol 0 timeout trick.
          firstFocusable ? firstFocusable.focus() : this.notifyOfFailure();
        }, 0);
      } else {
        this.notifyOfFailure();
      }

    }, 500)


  }

  private notifyOfFailure = (): void => {
    //  alert('NO FOCUS FOR YOU!');
  }

HTML： 添加id="panel1"到包含按钮的 div。

<div class="modal-footer" id="panel1">
        <button type="button" class="btn btn-primary" (click)="confirmAction($event)">{{okText}}
        </button>
        <button type="button" class="btn btn-secondary" (click)="cancelAction($event)"
          [class.inActive]="!cancelText">{{cancelText}}
        </button>
      </div>