MultiSelect: Duplicate Labels in MultiSelect Component Cause Errors

[sebasdeweert]

Describe the bug

When using the MultiSelect component with options that have identical labels, such as "New York", the component uses the label as the key. This leads to warnings and unexpected behavior.

Steps to Reproduce

1. Define a list of options with duplicate labels:

  const cities = [
    { label: 'Amsterdam', value: 0 },
    { label: 'Dublin', value: 1 },
    { label: 'New York', value: 2 },
    { label: 'New York', value: 3 },
    { label: 'Berlin', value: 4 },
  ];

2. Implement the MultiSelect component with this list.

3. Select the first "New York" option.

4. Notice the warning in the console:

Warning: Encountered two children with the same key, New York. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

5. Attempt to delete the duplicate "New York" option.

Expected Behavior
The component should handle duplicate labels without warnings or errors, allowing users to select and delete items correctly.

Actual Behavior

• A warning appears in the console about duplicate keys.

• When attempting to delete the duplicate, new values are incorrectly added to the list.

Possible Solution
Allow the use of a unique key other than the label for the MultiSelect component. This could be achieved by using the value field or an additional unique identifier for each option.

Additional Context
This issue can occur in scenarios where items have the same name, such as a list of people with identical first and last names.

Reproducer

https://stackblitz.com/edit/vitejs-vite-1u4ahw?file=src%2FApp.tsx

PrimeReact version

10.6.5

React version

18.x

Language

TypeScript

Build / Runtime

Vite

[melloware]

Thanks PR submitted!