Angular 2+如何在打开模态时关注模态输入？

Question

In a custom modal component that I have built, I want to get the input in the modal focused whenever the modal is opened

I tried two approaches:

1) Using ViewChild and ElementRef , then firing the focus(method), on modal open;

2) Using document.getElementByID('test').focus() method;

None of them worked

I tried testing another document property and it worked.

document.getElementByID('test').innerHtml = 'test'

but not the focus

simplified html for the modal:

<div [class.modal--open]="_open">
  <input #codeInput type="text" id='test'>
</div?

ts:

  @ViewChild('codeInput') codeInput: ElementRef
  @Input() set open(value: boolean) {
    this._open = value;
    if (value) {
     // here is where i need to get focus on the input
        document.getElementByID('test').focus() // did not work
        this.codeInput.nativeElement.focus() // did not work
    }
  }

Demo for testing https://stackblitz.com/edit/angular-2ye3ag

Answer 1

Just use autofocus in the input field

<input type="text" name="firstName" autofocus>

Working example

Answer 2

You have an error in modal class declaration, correct it and it will work

<div  [ngClass]="['modal', style]" [class.modal--open]="_open">
                    ^
<div  [ngClass]="modal" [class.modal--open]="_open">

https://stackblitz.com/edit/angular-zsszxc

Answer 3

If you want to do some dynamic focusing then you can use the afterviewInit lifecycle hook where after viewInit you set the focus using renderer rather than native methods.

In you component

AfterViewinit() {    
this._renderer.setAttribute(elRef,'focus',true);    
}

Answer 4

I figured out the problem, the focus is working it just needs some time to fire, I wrapped the focus() method with a setTimeOut() and it worked

    if (value) {
      setTimeout(() => {
        this.codeInput.nativeElement.focus()
      }, 1000)
    }

full solution https://stackblitz.com/edit/angular-2ye3ag

Answer 5

For those using - ng-Bootstrap

Only after calling the modal method open(...) , you can take the element by id, and call method focus()

  public createCustomModal(modalDivElement: any, autoFocusElement?: string)
  {
    let ngbModalRef = this.ngbModalService.open(modalDivElement);
    if (autoFocusElement)
    {
      document.getElementById(autoFocusElement).focus();
    }

    return ngbModalRef;
  }