In a custom modal ponent 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

In a custom modal ponent 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./edit/angular-2ye3ag

• javascript
• angular
• typescript

Share Improve this question Follow edited Apr 19, 2019 at 2:20 Vega 28.8k2828 gold badges120120 silver badges145145 bronze badges asked Apr 18, 2019 at 12:20 M. GamieM. Gamie 18333 silver badges1515 bronze badges 3

• You may just want to use autofocus on the html tag. Otherwise, you need to check whether the element is visible or not, since focus will trigger only on visible elements. – briosheje Commented Apr 18, 2019 at 12:29
• try enclosed in setTimeOut: setTimeOut(()=>{this.codeInput.nativeElement.focus()}) – Eliseo Commented Apr 18, 2019 at 12:59
• didn't work either – M. Gamie Commented Apr 18, 2019 at 13:20

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

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./edit/angular-zsszxc

Just use autofocus in the input field

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

Working example

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 ponent

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

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./edit/angular-2ye3ag

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