multiselect: selectedOptions within selectedItemsTemplate not cleared

[capc0]

Describe the bug

When using a multiselect with selectedItemsTemplate template, the internal selectedOptions variable is not always cleared correctly. Therefore a previous value is still rendered within the multiselect.

Unfortunatly I am currently not able to reproduce this within a stackblitz issue template, but the problem is that the internal selectedOptions variable is not cleared when the modelValue and visibleOptions is set to an empty array [].

Because visibleOptions is empty here https://github.com/primefaces/primeng/blob/master/src/app/components/multiselect/multiselect.ts#L1122, the variable selectedOptions is not updated and still has dirty state.

---

As a workaround the following can be added:

else if (this.selectedOptions?.length > 0) {
                this.selectedOptions = [];
                this.cd.markForCheck();
}

---

I believe the bug was introduced with issue https://github.com/primefaces/primeng/issues/14187

Environment

Latest

Reproducer

https://stackblitz.com/edit/github-8p6qdv?file=src%2Fapp%2Fapp.component.html

Angular version

17

PrimeNG version

17.13.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[Xriuk]

+1

[Dharmang92]

Facing the same issue. Any update?

[capc0]

As a workaround you can patch the multiselect constructor locally https://github.com/primefaces/primeng/blob/master/src/app/components/multiselect/multiselect.ts#L1182

from:

effect(() => {
    const modelValue = this.modelValue();

    const visibleOptions = this.visibleOptions();
    if (visibleOptions && ObjectUtils.isNotEmpty(visibleOptions)) {
        if (this.optionValue && this.optionLabel && modelValue) {
            this.selectedOptions = visibleOptions.filter((option) => modelValue.includes(option[this.optionLabel]) || modelValue.includes(option[this.optionValue]));
        } else {
            this.selectedOptions = modelValue;
        }
        this.cd.markForCheck();
    }
});

to:

effect(() => {
    const modelValue = this.modelValue();

    const visibleOptions = this.visibleOptions();
    if (visibleOptions && ObjectUtils.isNotEmpty(visibleOptions)) {
        if (this.optionValue && this.optionLabel && modelValue) {
            this.selectedOptions = visibleOptions.filter((option) => modelValue.includes(option[this.optionLabel]) || modelValue.includes(option[this.optionValue]));
        } else {
            this.selectedOptions = modelValue;
        }
        this.cd.markForCheck();
    }
    else if (this.selectedOptions?.length > 0) {
        this.selectedOptions = [];
        this.cd.markForCheck();
    }
});

[aliaksandrZh]

As a workaround you can patch the multiselect constructor locally https://github.com/primefaces/primeng/blob/master/src/app/components/multiselect/multiselect.ts#L1182

from:

effect(() => {
    const modelValue = this.modelValue();

    const visibleOptions = this.visibleOptions();
    if (visibleOptions && ObjectUtils.isNotEmpty(visibleOptions)) {
        if (this.optionValue && this.optionLabel && modelValue) {
            this.selectedOptions = visibleOptions.filter((option) => modelValue.includes(option[this.optionLabel]) || modelValue.includes(option[this.optionValue]));
        } else {
            this.selectedOptions = modelValue;
        }
        this.cd.markForCheck();
    }
});

to:

effect(() => {
    const modelValue = this.modelValue();

    const visibleOptions = this.visibleOptions();
    if (visibleOptions && ObjectUtils.isNotEmpty(visibleOptions)) {
        if (this.optionValue && this.optionLabel && modelValue) {
            this.selectedOptions = visibleOptions.filter((option) => modelValue.includes(option[this.optionLabel]) || modelValue.includes(option[this.optionValue]));
        } else {
            this.selectedOptions = modelValue;
        }
        this.cd.markForCheck();
    }
    else if (this.selectedOptions?.length > 0) {
        this.selectedOptions = [];
        this.cd.markForCheck();
    }
});

In this approach we clear values shown here , However, the internal state of the multi-select still retains its values. Shouldn't we clear the value of this.modelValue as well?

[capc0]

As far as I understand the code here, the effect runs whenever modelValue changes. The code here only is intended to update selectedOptions based on the current modelValue.

[aliaksandrZh]

Since we have the.visibleOptions() in effect, changes to the visibleOptions trigger that code as well. In the StackBlitz example, the clear() method assigns an empty array to the options, which is why the code runs in this case. Am I wrong?

As I can see, once we click on clear(), only visibleOptions is changed.

[Xriuk]

Any updates on this?