I am trying to figure out how to call a function from a component only when it is clicked or focused. Below is a snippet of the components HTML:
<div class="form-add-new__input-box">
<input
#commentCategories
class="form-add-new__category-box"
(click)="toggleCategoriesSelection($event)"
(focus)="toggleCategoriesSelection($event)"
(keyup)="searchCategory($event.target.value)"
tabindex="0"
placeholder="Search or select">
<span class="icon-arrow-down"></span>
</div>
and the corresponding function:
public toggleCategoriesSelection(event: Event): void {
event.stopPropagation();
event.preventDefault();
this.categoriesSelectOpen = !this.categoriesSelectOpen;
}
My current issue is that toggleCategoriesSelection is being called twice on the first click. I tried using something like this, but it didn't work:
(click | focus)="toggleCategoriesSelection($event)"
Is there another way to achieve this functionality?