So what was happening is like the title says. On (focusout) when I called a method that checks if an element is an document.activeElement (focused), I was always getting the body as a result. Only if I click on another window/inspector tools I was getting a correct result when doing a console.log which was in my case a button element.
Note that this is in Angular.
Solution is below.
component.html:
<button
(focusout)="_onFocusOut()"
class="typography-button" (keydown)="_onItemKeyDown($event)"
(click)="_selectItem(item)" #menuitem>
{{ item.label }}
</button>
component.ts
_onFocusOut(): void{
const isActiveElement = this.menuItemElements?.toArray().some(item => {
// document.activeElement is always body
return item.nativeElement == document.activeElement;
});
if(!isActiveElement){
// do something
}
}
The solution was just to wrap the whole method logic in a settimeout method:
_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;
}
});
}