Focus when clicking on the button that opens the input

Question

How do I focus on input, which is hidden first, but opens on the click of a button? The autofocus attribute only works the first time, and 'nativeElement' of undefined. On jQuery everything is simple, but I need to do without it.

<input type="text" *ngIf="isVisible" #test autofocus>
<button (click)="testAction()">Test</button>

@ViewChild('test') test: ElementRef;
isVisible = false;
testAction() {
this.isVisible = !this.isVisible;
this.test.nativeElement.focus();
}

Instead of `*ngIf` use `[hidden]`. Using `*ngIf` will prevent the DOM element from rendering which is why you can't focus it, since it doesn't exist. — Hoyen, Mar 30 '18 at 16:36

score 0 · Accepted Answer · answered Mar 30 '18 at 16:31

I did the something similar to what you're asking; however, I did it using a directive:

import { Directive, ElementRef, Input, OnChanges } from '@angular/core';

@Directive({
  selector: '[afnFocus]'
})
export class FocusDirective implements OnChanges {
  @Input() afnFocus: boolean;

  constructor(private el: ElementRef) { }

  ngOnChanges() {
    if (this.afnFocus) {
      this.el.nativeElement.focus();
    }
  }

}

Then place the directive on the element and tie it to the boolean isVisible.

Oleg Zinchenko · Answer 2 · 2018-04-04T11:54:21.093

0

Another method

testAction() {
 this.isVisible = !this.isVisible;

 if (this.test && this.test.nativeElement) {
    setTimeout(() => this.test.nativeElement.focus(), 800);
 }
}

edited Apr 04 '18 at 11:54

answered Apr 02 '18 at 22:42

Oleg Zinchenko

503
7
16

Focus when clicking on the button that opens the input

2 Answers2