[pickers][DateRangePicker] shortcuts should allow specifying React key

[wchargin]

Summary

We pass slotProps={{ shortcuts: { items } }} to DateRangePicker, which accepts an array of objects with properties label and getValue. Internally, these seem to be rendered as list items using the label as the React key:

https://github.com/mui/mui-x/blob/0a88646b5ef270612422b3ddb4cbe028eb8a0323/packages/x-date-pickers/src/PickersShortcuts/PickersShortcuts.tsx#L90

It would be helpful to be able to specify a key here manually. We're hitting a case where in some locales there are multiple items that have the same translated label, which causes a React key error. Of course, it isn't ideal that these strings are identical to the user, either, but being able to set a key would nonetheless improve the situation.

Suggested API: let items take an array of objects with properties label, getValue, and key?: string | null.

Examples

https://mui.com/x/api/date-pickers/pickers-shortcuts/#pickers-shortcuts-prop-items

Motivation

(see above)

Search keywords: daterangepicker, shortcuts, key Order ID: 85391

[michelengelen]

Hey @wchargin thanks for raising this issue.

Indeed we could enhance this a bit. if we go with the approach you are suggesting we could then also do a fallback to the original implementation to not break anything:

<ListItem key={item.key || item.label}>

WDYT @noraleonte ?

[noraleonte]

Hey @wchargin 👋 Thanks for opening this 💯

@michelengelen Technically, this is possible by doing something like this, but I agree it's waaay too long of a solution for something like this. So I opened a PR with hopefully a quick fix 🙈

[github-actions[bot]]

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@wchargin: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.