CODEWITHSUNDEEP
angulartypescriptprimengmulti-select
Fseee
Fseee

Reputation: 2627

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.

Upvotes: 6

Views: 6418

Answers (3)

Zoha Irshad
Zoha Irshad

Reputation: 467

You can call onChange() event of p-multiSelect like:

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

Upvotes: 0

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24472

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

Upvotes: 2

Fseee
Fseee

Reputation: 2627

Bug fixed since 12.2.2 primeng version

Upvotes: 0

Related Questions