[Angular 12] element 에 focus 주기

Angular 에서 focus 주는건 간단한데 ... 원칙대로 했는데 안되서

여러가지 시도해서, 해결책을 찾아서 메모함

 

버전 : Angular 12

 

1. html (focus 주려는 애)

<div tabindex="0" #optionPanel></div>

 

2. .ts (focus 주는 애)

import {
    ElementRef,
    OnInit,
    QueryList,
    Renderer2,
    ViewChild
} from '@angular/core';


export class IptSelectComponent implements OnInit {
	
    ...
    
    @ViewChild('optionPanel', {static:true}) optionPanel:ElementRef;
    
    ...
    
    openOptionPanel() {

        this.optionPanel.nativeElement.focus();
        //이 것만으로 focus 가 작동해야 하는데 안됐다 ㅠㅠ
        
        setTimeout(()=>{
            this.optionPanel.nativeElement.focus()
        })
        //setTimeout 에 넣으니까 100% 작동됨
    }

 

setTimeout 안에 ~~.nativeElement.focus() 주니까 그제서야 작동..

뭔가의 트릭이긴한데 일단 작동시켜야 하니 쓴다