Duplicated call to function in Angular4 button

Question

So,I have an angular input area like this:

<div class="form-group row">
        <div class="col-md-10">
            <pre class="card card-block card-header">Search Publication by id: {{id}}</pre>
            <input type="text"
                   class="form-control"
                   ngui-auto-complete
                   [(ngModel)]="id"
                   [source]="publications"
                   value-formatter="id, title"
                   list-formatter="id, title"
                   />
            <button class="btn btn-primary" (keyup.enter)="search(id.id)" (click)="search(id.id)">Search Publication</button>
         </div>
    </div>

The idea is to give the user the option to make the call to the search function via keyboard or mouse.

The problem I find is that the call is duplicated, it calls it once for the keyup.enter and again for the click

Is there any easy way to avoid this that doesn't imply customized directives?

Answer 1

In a form Enter causes the button to trigger the click event anyway, therefore just adding the click handler should do

<button class="btn btn-primary" (click)="search(id.id)">Search Publication</button>

Answer 2

Sounds like the default browser behavior is duplicating your event - the click event is being automatically fired when you hit enter (when the text input has focus).

It should just work if you remove the (keyup.enter) event from your button - or you can skip reliance on the browser and add that event to the input field, rather than the button.

Answer 3

The simplest and cleanest way to do that is to create a real form which will respond to the click of the button and to the push of the key "enter".

<form class="form-group" (ngSubmit)="search('test')">
  <div class="row">
    <div class="col-md-12">
      <div>
        <input type="text" class="form-control"/>
        <button class="btn btn-primary"
                type="submit">
          Search Publication
        </button>
      </div>
    </div>
  </div>
</form>

The method you want to call is precised in the (ngSubmit). The button must of type "submit".

Answer 4

You need to stop the event propagation after hitting enter. Change your code to use (keydown.enter) instead of (keyup.enter) and add $event.preventDefault(); after the method.

<button class="btn btn-primary" 
        (keydown.enter)="search(id.id); $event.preventDefault();" 
        (click)="search(id.id)">Search Publication</button>

Link to working demo.