ng-select: Do not open dropdown on custom template label click

Question

I need to execute an action if a user clicks on my custom label in a ng-select multiselect in Angular 6. I tried the following:

Template:

<ng-select [multiple]="true"] (...)>

  <ng-template ng-label-tmp let-item="item" let-clear="clear">
      <span class="ng-value-label" (click)="onLabelClick(item, $event)">{{item.name}}</span>
      <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>
  </ng-template>

</ng-select>

Component function:

onLabelClick(item, $event) {

  $event.stopPropagation();
  $event.preventDefault();

  // Do my stuff
  (...)
}

The function is triggered, but it always opens the ng-select dropdown and sets the focus in the ng-select combobox. I want the dropdown to stay closed, when a user clicks one of the labels. And the focus should not be in the combobox, because on a mobile device this would open the keyboard.

Does somebody have an idea?

Answer 1

The ng-select developers helped me: It works perfectly to use mousedown:

<ng-template ng-label-tmp let-item="item" >
  <span (mousedown)="$event.stopPropagation()">{{ item }}</span> 
</ng-template>

https://github.com/ng-select/ng-select/issues/1092