Blur not working - Angular 2

Question

I'm trying to set a blue event in angular 2 like so:

<div id="area-button" (blur)="unfocusAreaInput()" class="form-group" (click)="focusAreaInput()">

component.ts:

import { Component, ViewChild, ElementRef, Output, EventEmitter } from '@angular/core';
import { GoogleplaceDirective } from 'angular2-google-map-auto-complete/directives/googleplace.directive';

@Component({
    selector: 'my-area',
    directives: [GoogleplaceDirective],
    templateUrl: 'app/find-page/area-picker.component.html',
    styleUrls: ['app/find-page/area-picker.component.css']
})
export class AreaComponent {
    public address: Object;
    @ViewChild('areaInput') areaInput;
    areaSelected: boolean = false;
    @Output() onAreaSelected = new EventEmitter<boolean>();
    @Output() onAreaDeselected = new EventEmitter<boolean>();

    constructor(el: ElementRef) { }
    getAddress(place: Object) {
        this.address = place['formatted_address'];
        var location = place['geometry']['location'];
        var lat = location.lat();
        var lng = location.lng();
        console.log("Address Object", place);
    }

    focusAreaInput() {
        this.areaInput.nativeElement.focus();
        this.onAreaSelected.emit(true);
    }

        unfocusAreaInput() {
        this.onAreaSelected.emit(false);
    }
}

unfocusAreaInput() never gets executed. Why?

Answer 1

You can also try (focusout)="unfocusAreaInput()" on your div. That will fire when any focusable element inside the div loses focus (incl. when the element is removed) and some other element in the div isn't simultaneously focused.

If you want to know what element lost focus inside your div, you can pass that in like so: (focusout)="unfocusAreaInput($event.target)".

More information here: https://developer.mozilla.org/en-US/docs/Web/API/Element/focusout_event

Answer 2

Use tabindex property with it. Setting

tabindex="0" 

will give it highest priority in getting focus thus your blur event will work