focusout event does not trigger with tab button in angular component

Question

In an angular component I want to replace a div with a select element when the specific div focused and as soon as element focused div element replaces with select element. this code work when user select the item by mouse but when using the tab key focusout event doesn't trigger.

on focus method I tried to focus the select element but I don't know why focusout is not triggered after pressing tab button.

 onFocus(item){
    item.isActive = true;
    document.getElemntById(item.id).focus();
}  


    
    <div *ngFor="let item of array"
        <div class="cell">
           <select [attr.id]="item.id"
                 [hidden]="!item.isActive"
                 (focusout)="item.isActive = false"
           >
          </select>
           <div
              tabindex="0"
              [hidden]="!item.isActive"
              (focus)="onFocus(item)"
           >
           </div>
        </div>
    </div>

Answer 1

I changed the onFocus method to this:

onFocus(item){
    item.isActive = true;
    setTimeout(function () { 
        document.getElemntById(item.id).focus(); 
    }, 0);
}  

Now it works but I think this is not a tidy solution.