javascript - document.ActiveElement siempre devuelve body en Angular

Entonces, lo que estaba pasando es como dice el título. En (focusout) cuando llamaba a un método que verifica si un elemento es un document.activeElement (enfocado), siempre obtendría como resultado el body. Solo si hacía clic en otra ventana/herramientas de inspección obtenía un resultado correcto al hacer un console.log, que en mi caso era un elemento de botón.

Tenga en cuenta que esto está en Angular.

La solución está abajo.

component.html:

<button 
  (focusout)="_onFocusOut()" 
  class="typography-button" (keydown)="_onItemKeyDown($event)" 
  (click)="_selectItem(item)" #menuitem>
  {{ item.label }}
</button>

componente.ts

_onFocusOut(): void{
  const isActiveElement = this.menuItemElements?.toArray().some(item => {
  // document.activeElement is always body
    return item.nativeElement == document.activeElement;
  });

  if(!isActiveElement){
    // do something
  }

}

Respuesta #1

La solución fue simplemente envolver toda la lógica del método en un método settimeout:

_onFocusOut(): void{
// add setTimeout with no value as a second parameter
    setTimeout(() => {
      const isActiveElement = this.menuItemElements?.toArray().some(item => {
        return item.nativeElement == document.activeElement;
      });

      if(!isActiveElement){
        this._toggled = false;
      }
    });
  }