I have an Angular project with a setup similar to this:
<input type="text" [(ngModel)]="search" >
<app-item-list
[items]="foundItems"
(itemClick)="onItemSelected($event)">
</app-item-list>
There’s an input field that the user types in. As they type, the item-list
component populates with results.
In the item list component, it simply shows all items passed in, and if one is clicked, it fires the event itemClick
So long as the input remains active, the user must click twice on an item in order for the click event to fire. Clicking anywhere else (to deselect the input field) and then clicking an item also works.
This is supposed to be some sort of search ‘dropdown box’, where typing displays a list of autocomplete-like options fetched from elsewhere. It works fine other than having to click twice. The first click only fires an ngModelChange
event and the second fires the itemClick
event.