primeNG multiselect on change not triggered on chips removal

user_220040 0
Viewed 2121

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.

primeng angular typescript multi-select
2 Answers

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

user_39806210

Bug fixed since 12.2.2 primeng version

user_2200400
Related