MultiSelect with display=chip: Options with duplicate label but different values do not work properly when clearing

[janzubac-refined]

Describe the bug

When interacting with the MultiSelect-component that has display="chip", the component behaves incorrectly when there are options that have the same label but different values. This could for example be a list of users that happen to have the same name, but they are different people.

If one selects two values with the same label, and then press one of the chips for the selected items to unselect that option, both chips disappear (but one of the options is still checked as it can be seen that the checkbox is still checked).

Here, I would expect that only the chip that represents the option that I have unselected is cleared, not both (or all) chips that happen to have the same label.

Pull Request Link

No response

Reason for not contributing a PR

• Lack of time
• Unsure how to implement the fix/feature
• Difficulty understanding the codebase
• Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/wp8a1njv?file=src%2FApp.vue

Environment

I have been able to reproduce this in a StackBlitz that is based on your demo pages, so no specific environment is needed here.

Vue version

3.1.0

PrimeVue version

4.3.7

Node version

No response

Browser(s)

No response

Steps to reproduce the behavior

1. Select both Paris options in the StackBlitz
2. Press on the chip for one of the selected options to clear that value from selection
3. Both chips disappear

Expected behavior

Only the selected chip disappears when unselected by clicking the chip, not all with the same label.