The issue discussed in the Blur not working - Angular 2 thread is relevant here.
I have a custom select shared component and I am attempting to implement a blur event to close it when the component loses focus.
// HTML
<div (blur)="closeDropDown()" tabindex="0">
<span (click)="selectClicked()" class="placeholder">
Select Item
</span>
<div class="options">
<ul>
<li *ngFor="let item of data">
<span>{{item}}</span></li>
</ul>
</div>
//TS
selectClicked() {
this.dropdownOpen = true;
}
closeDropDown() {
this.dropdownOpen = false;
}
I successfully added the blur event using the mentioned tabindex workaround (works in all browsers except IE). However, the blur event does not work in IE version > 10.
I attempted to use focusout instead of blur but the selected value does not get attached to the custom select and requires multiple selections to choose an option.
Why isn't the blur event triggering on the div element, and are there any alternative methods that can be used for block-level elements?