Ngx-Modal позволяет вам вкладывать за пределы себя - Angular 2

Question

Пример плунжера

Я поместил оболочку вокруг кода Ngx-Modal, чтобы я мог применить некоторый код ко всем моделям ngx. Я также заметил, что когда вкладка клавиатуры позволяет вам выйти за пределы модального режима, кто-нибудь знает, как это исправить? Я поместил событие keydown, чтобы перехватить попытку и ограничить статус...

//our root app component
import {Component, ContentChild, NgModule, HostListener, ElementRef} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {ModalModule} from "ngx-modal";
import { Modal } from "ngx-modal";

@Component({
  selector: 'ext-ngx-modal',
  template: `<ng-content></ng-content>`,
})
export class NgxModalComponent {
  @ContentChild(Modal) modal: Modal;

  openExt():void {
    this.modal.open();
  }

  @HostListener('document:keydown', ['$event'])
  onkeydown(ev: KeyboardEvent) {
     this.restrictModalFocus(ev);
  }

  restrictModalFocus(event: any): void {
    if (!this.modal.isOpened) {                        
        console.log("Modal is NOT open: " + this.modal);
        return
    }

    console.log("Modal is open");

    if (event.keyCode == '9' || event.which == '9') {
        let focusStillInModal = this.modal.modalRoot.nativeElement.contains(event.target);
        console.log("focusStillInModal: " + focusStillInModal);
    }
  }  
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}} I am </h2>
      <div class="row container-fluid">
        <button (click)="myExtNgxModal.openExt()"> open my modal</button>
        <ext-ngx-modal #myExtNgxModal>
          <modal #myModal>
              <modal-header>
                  <h1>Tab issue</h1>
              </modal-header>
              <modal-content>
                  tabbing...lets you out of modal!<br/><br/>
                  Content could be dynamic unknown text...<br/>
                  <input type="Text" value="Some field"><br/>
                  <input type="Text" value="Some field"><br/>
                  <input type="Text" value="Some field"><br/>
              </modal-content>
          </modal>
        </ext-ngx-modal>
      </div>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = 'Angular2'
  }
}

@NgModule({
  imports: [ BrowserModule, ModalModule ],
  declarations: [ App, NgxModalComponent ],
  exports: [ NgxModalComponent ],
  bootstrap: [ App ]
})
export class AppModule {}