title: Blur event is not triggering in IE - Angular 2+
body: <p>The below problem is related to <a href="https://stackoverflow.com/questions/39259775/blur-not-working-angular-2">Blur not working - Angular 2</a> thread.</p>
  
  <p>I have a shared component of custom select and I am trying to add a blur event to close when the component is not in focus.</p>
  
  <pre><code>// HTML
  
  &lt;div (blur)="closeDropDown()" tabindex="0"&gt;
    &lt;span (click)="selectClicked()" class="placeholder"&gt;
      Select Item 
    &lt;/span&gt;
    &lt;div class="options"&gt;
      &lt;ul&gt;
         &lt;li *ngFor="let item of data"&gt; 
         &lt;span&gt;{{item}}&lt;/span&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>
  
  <h1>    </h1>
  
  <pre><code>//TS
  
   selectClicked() {
     this.dropdownOpen = true;
   }
  
   closeDropDown() {
     this.dropdownOpen = false;
   }
  </code></pre>
  
  <p>I was able to implement the blur event by adding the tabindex mentioned in the thread(works in all browsers except IE). But blur event is not firing in IE(version > 10).</p>
  
  <p>I tried to use focusout instead of blur but the selected value is not getting attached to the custom select and requires many selections to select an option.</p>
  
  <p>Why does blur is not triggering on div and are there any alternatives that I can use on block level elements?</p>