Does Enter key trigger a click event?

In the code below removeSelectedCountry() should be called when a span element is clicked and handleKeyDown($event) should be called when there is a keydown event on a div.

@Component({
selector: "wng-country-picker",
template: `
<ul class="CountryPicker-selected" *ngIf="selectedCountries.length > 0">
<li *ngFor="let country of selectedCountries">
<span class="Pill Pill--primary" (click)="removeSelectedCountry(country)">
{{ country.name }}
</span>
</li>
</ul>
<div (keydown)="handleKeyDown($event)" class="CountryPicker-input"></div>
`,
providers: [CUSTOM_VALUE_ACCESSOR]
})

But removeSelectedCountry() is called every time Enter key is pressed.

To make the code work, I had to change the click event to mousedown event. It works fine now.

Can anyone explain why the Enter key would trigger the click event?

@Component({
selector: "wng-country-picker",
template: `
<ul class="CountryPicker-selected" *ngIf="selectedCountries.length > 0">
<li *ngFor="let country of selectedCountries">
<span class="Pill Pill--primary" (mousedown)="removeSelectedCountry(country)">
{{ country.name }}
</span>
</li>
</ul>
<div (keydown)="handleKeyDown($event)" class="CountryPicker-input"></div>
`,
providers: [CUSTOM_VALUE_ACCESSOR]
})

Adding class snipppet:

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 => ctry.code === country.code).length > 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
}
}

130219

小开

For ENTER key, why not use (keyup.enter):

@Component({
selector: 'key-up3',
template: `
<input #box (keyup.enter)="values=box.value">
<p>\{\{values}}</p>
`
})
export class KeyUpComponent_v3 {
values = '';
}

小开

Use (keyup.enter).

Angular can filter the key events for us. Angular has a special syntax for keyboard events. We can listen for just the Enter key by binding to Angular's keyup.enter pseudo-event.

小开

<form (keydown)="someMethod($event)">
<input type="text">
</form>

someMethod(event:any){
if(event.keyCode == 13){
alert('Entered Click Event!');
}else{
}
}

小开

Here is the correct SOLUTION! Since the button doesn't have a defined attribute type, angular maybe attempting to issue the keyup event as a submit request and triggers the click event on the button.

<button type="button" ...></button>

Big thanks to DeborahK!

Angular2 - Enter Key executes first (click) function present on the form

小开

@Component({
selector: 'key-up3',
template: `
<input #box (keyup.enter)="doSomething($event)">
<p>\{\{values}}</p>
`
})
export class KeyUpComponent_v3 {
doSomething(e) {
alert(e);
}
}

This works for me!

小开

For angular 6 there is a new way of doing it. On your input tag add

(keyup.enter)="keyUpFunction($event)"

Where keyUpFunction($event) is your function.

小开

What personally me fount usable for me is:

(mousedown)="callEvent()" (keyup.enter)="$event.preventDefault()

keyup.enter prevents the event from triggering on keyup, but it still occurs for keydown, that works for me.