Выпадающий список Primeng предотвращает закрытие оверлея при выборе элемента и обновляет параметры

Question

Я пытаюсь обновить список опций в раскрывающемся списке после нажатия опции «-More-». Я получаю, что он работает с шаблоном для параметров и привязки события щелчка Я предотвращаю его stopPropagation () fun c.

<ng-template let-city pTemplate="item">
  <span (click)="onClickFunction(city, $event)">{{city.label}}</span>
</ng-template>

onClickFunction(city, e) {
  if (city.label === '-More-') {
    this.cities.pop();
    this.cities = [...this.cities, ...this.newCities];

    e.stopPropagation();

    this.cd.markForCheck();
    this.cd.detectChanges();
  }
}

Но проблема в том, что иногда он работает с первой загрузки, но обычно я нажимаю 3 раз на опции "-More-", и тогда он работает правильно. Я это ошибка или я не так делаю? может есть другое решение получше? Спасибо

https://stackblitz.com/edit/primeng-dropdown-demo-j6te3c

Answer 1

Итак, я обнаружил проблему, почему это иногда не работает.

<span> с привязанным событием (щелчком) намного меньше, чем окно, обернутое выше (<li>), поэтому при точном нажатии в диапазоне это работает, если вы щелкните немного справа от текстовой опции «-More-», то это не сработает.

Решение для меня - использовать <div> вместо <span> и переопределить заполнение по умолчанию с отрицательными полями и добавьте точное заполнение для этого

code:

<ng-template let-city pTemplate="item">
  <div class="option" (click)="onClickFunction(city, $event)">{{city.label}}</div>
</ng-template>

div.option {
  margin: -0.429em -0.857em;
  padding: 0.429em 0.857em;
}