title: Cannot `focus` after `blur` from another element in angular2
body: <p>Consider the following <a href="https://plnkr.co/edit/drhfXAoI78mdeqlv3jYu?p=preview" rel="nofollow">plunker</a></p>
  
  <p>I have an input that will expand into dropdown when <code>(focus)</code> I want to have the following behavior</p>
  
  <ol>
  <li><strong>When input is focused, user click anywhere that is not 
         in the <code>dropdown</code> or <code>input</code> , <code>dropdown</code> should be contracted</strong></li>
  <li><strong>When input is focused, user click on the <code>dropdown</code>, <code>dropdown</code> should stay expanded</strong></li>
  </ol>
  
  <p>Right now when user click on the input and click on the dropdown, the dropdown is contracted.</p>
  
  <p>Here is my code for reference</p>
  
  <pre><code>@Component({
    selector: 'my-app',
    template: `
        &lt;div class="wrapper"&gt;
          &lt;input [(ngModel)]="searchText" 
                 tabindex="0"
                 placeholder="name" 
                 (focus)="inputShow()"
                 (blur)="inputHide()" 
                 &gt;
          &lt;div class="option-wrapper" 
               [hidden]="isHideList()" 
               tabindex="0" 
               (focus)="inputShow()" 
               (blur)="inputHide()"&gt;
            &lt;li class="options" 
                *ngFor="#option of optionlist"&gt;
              &lt;div &gt;{{option['name']}}&lt;/div&gt;
            &lt;/li&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      `
  })
  export class App {
  
      optionlist = [{'name': '1'}, {'name': '2'}]
  
      inputShow() {
        this.inputFocus = true;
      }
      inputHide(){
        this.inputFocus= false;
      }
  
      isHideList() {
          return !this.inputFocus;
      }
  }
  </code></pre>
  
  <p>One way to get close to the expected behavior is to take away</p>
  
  <pre><code>(blur)="inputHide()"
  </code></pre>
  
  <p>on <code>input</code> like <a href="https://plnkr.co/edit/wOzMrWT5zE0HoKCvY7sA?p=preview" rel="nofollow">this</a></p>
  
  <p>But now when I click on <code>input</code> and click anywhere besides <code>input</code> and <code>dropdown</code> the <code>dropdown</code> does not contract</p>
  
  <p>Only if I click on <code>input</code> then <code>dropdown</code> then anywhere else does the <code>dropdown</code> contract</p>
  
  <p>Can anyone give me some insight on this?</p>
  
  <p>Thanks</p>