Así que lo que estaba pasando es como dice el título. En (focusout) cuando llamé a un método que verifica si un elemento es un document.activeElement (focused), siempre obtuve el cuerpo como resultado. Solo si hago clic en otra ventana/herramientas de inspección, obtuve un resultado correcto al hacer un archivo 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.
componente.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 } }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; } }); }