Multiselect: ngModel state not properly shown in UI

[Xorok]

Describe the bug

I wanted to implement a p-multiselect where at least one option has to be selected (so a minimum selected value of one).

I did this by setting the ngModel of the Multiselect to a default selected value in an onChange event function, if the event.value.length (length of current selection/ngModel value) becomes less than 1.

This works great for all other options, but if the last selected item is the default value and you try to unselect it, the UI displays it as unselected, even though the ngModel gets updated to have it be selected (like with all the other options where it is displayed correctly). The p-multiselect doesn't display the state correctly in the UI in this case. I already tried adding a call to filter.updateFilledState() and filter.updateLabel() after setting the ngModel, but it didn't make a difference.

See the StackBlitz demo.

Environment

Angular App

Reproducer

https://stackblitz.com/edit/primeng-multiselect-demo-ns2g3n?file=src%2Fapp%2Fapp.component.ts

Angular version

16.2.3

PrimeNG version

16.2.0

Build / Runtime

TypeScript

Language

TypeScript

Node version (for AoT issues node --version)

18.17.0

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

The p-multiselect should display the state of the ngModel correctly. In the Stackblitz demo, attempting to unselect the default value if it is the last selected element in the Multiselect should immediately show it as reselected in the UI.

[github-actions]

This issue has been automatically marked as stale due to a lack of activity. If this issue is still relevant to you, please leave a comment so we can keep it open. We apologize for not being able to prioritize it sooner. If you have any new information or questions, please share them in your comment!