How to bring tab focus on popup as soon as it opens rather than keeping focus on previously selected value

Question

I have used a custom popup modal for confirmation messages from user. Here I have some input fields based on focus out, if any validation/confirmation message has to be taken from the user, the popup message opens. When the popup opens, the tab focus will be on already selected value in background and not on the popup, and if I use tab, it goes to the next input field in the background rather than giving focus on the popup. How can I handle this issue? Here based on tab focus to buttons on enter/space bar it takes the event of that particular button. I have used a directive to handle for keypress on 'ESC' in the keyboard. Here I want to work on these things but no idea how to make it work. 1. Here by default if there is only one button, then the tab focus must be on "Ok" button if there are 2 buttons say "ok" and "Cancel" the tab focus to be on the "okay" button. 2. by using tab/mouse I must be able to switch between the buttons. Help needed.

DEMO: DEMO

For getting popup i have used service file:

service.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) { }
      });
  }

Based on this blurout I am calling that service and showing the popup. As soon as popup opens I want tab focus to be on that popup irrespective of what popup lies on the background screen. but key functions should be only for popup when it is present, when the popup is closed, again control to be back on the specific field on the background and function accordingly.

Answer 1

I was able to make this work by adding a function to the popup component file and calling the same to when the popup has opened.

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: Added id="panel1" to the div which contains the buttons.

<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>

Answer 2

you can try this Angular2+ autofocus input element

Maybe use a Service to control the state of each modal.