angular 组件中的选项卡按钮不会触发 focusout 事件

Question

在 angular 组件中，当特定 div 聚焦时，我想用 select 元素替换 div 元素，一旦元素聚焦 div 元素替换为 select 元素。此代码在用户 select 通过鼠标选择项目时有效，但在使用 Tab 键时 focusout 事件不会触发。

在聚焦方法上我尝试聚焦 select 元素，但我不知道为什么在按下 tab 按钮后没有触发 focusout。

 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

我将 onFocus 方法更改为：

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

现在可以了，但我认为这不是一个整洁的解决方案。

angular 组件中的选项卡按钮不会触发 focusout 事件

focusout event does not trigger with tab button in angular component

javascript

angularjs

autofocus

focusout