title: Does Enter key trigger a click event?
body: <p>In the code below <code>removeSelectedCountry()</code> should be called when a <code>span</code> element is clicked and <code>handleKeyDown($event)</code> should be called when there is a <code>keydown</code> event on a <code>div</code>.</p>
  
  <pre><code>@Component({
      selector: "wng-country-picker",
      template: `
      &lt;ul class="CountryPicker-selected" *ngIf="selectedCountries.length &gt; 0"&gt;
      &lt;li *ngFor="let country of selectedCountries"&gt;
          &lt;span class="Pill Pill--primary" (click)="removeSelectedCountry(country)"&gt;
          {{ country.name }}
          &lt;/span&gt;
      &lt;/li&gt;
      &lt;/ul&gt; 
      &lt;div (keydown)="handleKeyDown($event)" class="CountryPicker-input"&gt;&lt;/div&gt;
  `,
  providers: [CUSTOM_VALUE_ACCESSOR]
  })
  </code></pre>
  
  <p>But <code>removeSelectedCountry()</code> is called every time <kbd>Enter</kbd> key is pressed.  </p>
  
  <p>To make the code work, I had to change the <code>click</code> event to <code>mousedown</code> event.
  It works fine now.</p>
  
  <p>Can anyone explain why the <kbd>Enter</kbd> key would trigger the <code>click</code> event?</p>
  
  <pre><code>@Component({
      selector: "wng-country-picker",
      template: `
      &lt;ul class="CountryPicker-selected" *ngIf="selectedCountries.length &gt; 0"&gt;
      &lt;li *ngFor="let country of selectedCountries"&gt;
          &lt;span class="Pill Pill--primary" (mousedown)="removeSelectedCountry(country)"&gt;
          {{ country.name }}
          &lt;/span&gt;
      &lt;/li&gt;
      &lt;/ul&gt; 
      &lt;div (keydown)="handleKeyDown($event)" class="CountryPicker-input"&gt;&lt;/div&gt;
  `,
  providers: [CUSTOM_VALUE_ACCESSOR]
  })
  </code></pre>
  
  <p>Adding class snipppet:</p>
  
  <pre><code>export class CountryPickerComponent {
  
  private selectedCountries: CountrySummary[] = new Array();
  
  private removeSelectedCountry(country: CountrySummary){
      // check if the country exists and remove from selectedCountries
      if (this.selectedCountries.filter(ctry =&gt; ctry.code === country.code).length &gt; 0)
      {
          var index = this.selectedCountries.indexOf(country);
          this.selectedCountries.splice(index, 1);
          this.selectedCountryCodes.splice(index, 1);
      }
  }
  
  private handleKeyDown(event: any)
  {
      if (event.keyCode == 13)
      {
         // action
      }
      else if (event.keyCode == 40)
      {
          // action
      }  
      else if (event.keyCode == 38)
      {
          // action
      }    
  }
  </code></pre>