It seems like everything is in order here, but for some reason, the event just won't fire...
const element = (this.agGridElm.nativeElement as HTMLElement);
element.addEventListener('focus', (focusEvent: FocusEvent) => {
element.classList.add('focused');
}, { capture: true, passive: true });
element.addEventListener('blur', (focusEvent: FocusEvent) => {
element.classList.remove('focused');
}, { capture: true, passive: true });
I've tried with and without the third argument { capture: true, passive: true }, but nothing changes... I find it strange that both focus and blur events are registered when inspected using Chrome debugger's Event Listeners, yet they do not trigger upon clicking on the element.
Interestingly, I had success implementing a similar functionality with the mouseleave event. So, why aren't focus and blur cooperating? The code snippet below functioned properly...
element.addEventListener('mouseleave', (mouseEvent: MouseEvent) => {
console.log('Hello!');
});