Как сделать так, чтобы вкладка фокусировалась на всплывающем окне, как только оно открывается, вместо того, чтобы сохранять фокус на ранее выбранном значении

Question

Я использовал специальный мод для всплывающих сообщений от пользователя. Здесь у меня есть несколько полей ввода, основанных на фокусировке. Если какое-либо сообщение подтверждения / подтверждения должно быть получено от пользователя, всплывающее сообщение открывается. Когда откроется всплывающее окно, фокус вкладки будет на уже выбранном значении в фоновом режиме, а не на всплывающем окне, и если я использую вкладку, он переходит к следующему полю ввода на заднем плане, а не фокусируется на всплывающем окне. Как я могу справиться с этой проблемой? Здесь, основываясь на фокусе вкладки для кнопок на панели enter/space, происходит событие этой конкретной кнопки. Я использовал директиву для обработки нажатия клавиш «ES C» на клавиатуре. Здесь я хочу работать над этими вещами, но не знаю, как заставить это работать. 1. Здесь по умолчанию, если есть только одна кнопка, тогда фокус вкладки должен быть на кнопке «Ок», если есть две кнопки, скажем «ок» и «Отмена», чтобы фокус вкладки был на кнопке «окей». 2. с помощью Tab / Mouse я должен иметь возможность переключаться между кнопками. Требуется помощь.

DEMO: DEMO

Для получения всплывающего окна я использовал служебный файл:

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

Исходя из этого blurout Я звоню в эту службу и показываю всплывающее окно. Как только откроется всплывающее окно, я хочу, чтобы вкладка фокусировалась на этом всплывающем окне независимо от того, какое всплывающее окно находится на фоновом экране. но ключевые функции должны быть только для всплывающих окон, когда они присутствуют, когда всплывающие окна закрыты, снова управляйте тем, чтобы вернуться в заданное поле c на фоне и работайте соответственно.

Answer 1

Мне удалось выполнить эту работу, добавив функцию в файл компонента всплывающего окна и вызвав ее, когда открылось всплывающее окно.

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>

Answer 2

вы можете попробовать этот Angular2 + элемент ввода автофокуса

Возможно, используйте Сервис для управления состоянием каждого модального режима.