Search code examples
angulartypescriptprimengmulti-select

primeNG multiselect on change not triggered on chips removal

below is a sample of my code. A primeng multiselect is the source of a primeng dropdown:

HTML:

<p-multiSelect [options]="elements" [(ngModel)]="selectedElements" optionLabel="name" display="chip"
  (onChange)="onElementChange($event)"></p-multiSelect
  
<p-dropdown [options]="availableElements" [(ngModel)]="selectedElement" optionLabel="elementID"
      placeholder="Select an Element"></p-dropdown>

ts:

onElementChange(event) {
  this.availableElements = [];
  this.availableElements = event.value;
}

Selecting elements from the multiselect dropdown is full working, but when I remove an element from the multiselect chips, then the onChange event is not triggered:

enter image description here

How can I trigger the onChange? Is it a not supported event? Thanks in advance.

Solution

  • It's considered a bug of the component because the internal state has been updated when you remove it... so temporarily you need to update the state by using onClick event and a template variable to get the component value.

    <p-multiSelect [options]="cities" 
        [(ngModel)]="selectedCities2" 
        defaultLabel="Select a City" optionLabel="name"
        display="chip" 
        (onClick)="selectedCities2 = elm.value" 
        #elm>
</p-multiSelect>


{{selectedCities2| json}}

    stackblitz demo