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?

Stefan Svrkota · Accepted Answer · 2016-08-31T22:43:25.443

29

Your blur event is not working because your div can't receive focus in the first place. If you add tabindex="1" (1 can be replaced with any number) or contentEditable (this will make div's content editable) to your div, it will be able to receive focus and then blur event will work. Plus, you can then use focus instead of click.

edited Aug 31 '16 at 22:43

answered Aug 31 '16 at 22:29

Stefan Svrkota

48,787
9
98
87

1

not working, (blur) on div even after setting tabindex=0, the div also contains ngIf, is that matters? – Sunil Garg Apr 07 '20 at 13:50
2

This doesn't work...is there an updated answer? This shouldn't be marked as the answer unless a working example is shown. – Funn_Bobby Oct 07 '20 at 15:29
2

That's not working because div is not focused when initialized anyway. I have added window.document.getElementById('container').focus() in my ngOnInit() and then it works. Needed to outline: 0 in css for div as well. – Emilia Heller-Mrotek Aug 16 '21 at 10:00

Kevin Beal · Answer 2 · 2019-06-25T16:09:41.683

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

score 3 · Answer 3 · edited Apr 07 '20 at 13:48

3

Use tabindex property with it. Setting

tabindex="0"

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

edited Apr 07 '20 at 13:48

Sunil Garg

14,608
25
132
189

answered Oct 02 '16 at 20:12

Ankit Kapoor

1,615
12
18

(blur) not working on div even after setting the tabindex=0 – Sunil Garg Apr 07 '20 at 13:49

Blur not working - Angular 2

3 Answers3

Linked