Angular2 - @HostListener('focus') doesn't work

Question

I'm trying to catch a focus event by @HostListener. But it doesn't work well for me.

I saw an article below.

HTML5 event handling(onfocus and onfocusout) using angular 2

Also saw a plunker appeared on the article.

http://plnkr.co/edit/0K1nxX2ltZ4ztfe5uJ6E?p=preview

It worked on me. However I changed it as below, it wouldn't work then.

@Component({
    selector: 'my-app',
    template: `<input name="date" type="text" (focus)="focusFunction()" (focusout)="focusOutFunction()">` 
})
export class App {
    @HostListener('focus', ['$event.target'])
    onFocus(target: any) 
        console.log("Focus called from HostListener");
        target.type = 'date';
    }
    @HostListener('focusout', ['$event.target'])
    onFocusout(target: any) {
        console.log("Focus out called from HostListener");
        target.type = 'text';
    }

    focusOutFunction(){
        console.log("Focus out called");
    }
    focusFunction(){
        console.log("Focus called");
    }
}

Regarding focusout, both of them are called. But focus (focusin) works only focusFunction, not work onFocus by @HostListener.

How can I make @HostListener works with focus event?

score 12 · Accepted Answer · answered Feb 03 '17 at 21:44

12

That's because @HostListener attaches a listener to the host element. In this case your host element is the <my-app></my-app> element. When you focus inside the <input> element the focus event does not bubble up to its parent. Also, only certain elements can actually fire a focus event and the my-app element is not one of them.

The example you posted uses a @Directive which they place on the <input> element. Which obviously makes it possible to listen for focus events on the directive.

You can however have a custom element fire a (focus) event by setting the tabindex="0" as attribute.

answered Feb 03 '17 at 21:44

Poul Kruijt

69,713
12
145
149

Thank you for the reply. I got it. I misunderstood the role of the hostlistenler. – Yusuke Masuda Feb 04 '17 at 21:33
Directive is also the way to go, when you are working with custom components that dont expose the `(onfocus)` event – Mauricio Gracia Gutierrez Jul 23 '21 at 20:37

score 3 · Answer 2 · answered Jan 02 '18 at 09:03

3

use blur instead of focusout HostListener

@HostListener('blur') onblur() { ....... ....... }

answered Jan 02 '18 at 09:03

Rinold

343
1
2
12

score 1 · Answer 3 · answered May 23 '18 at 22:40

For those desperately checking for errors in their code and finding none.

Mind that focus events are dispatched on block elements with tabindex set to something. This relates to both, (event) listeners in templates and in components via @HostListener().

Angular2 - @HostListener('focus') doesn't work

3 Answers3