react 18.3.0 "A props object containing a "key" prop is being spread into JSX"

[xaicron]

Steps to reproduce 🕹

Link to live example: https://mui.com/material-ui/react-autocomplete/#multiple-values

using Next.js

It works, but I get warnings on the console.

Warning: A props object containing a "key" prop is being spread into JSX:
  let props = {key: someKey, label: ..., size: ..., className: ..., disabled: ..., data-tag-index: ..., tabIndex: ..., onDelete: ...};
  <ForwardRef(Chip) {...props} />
React keys must be passed directly to JSX without using spread:
  let props = {label: ..., size: ..., className: ..., disabled: ..., data-tag-index: ..., tabIndex: ..., onDelete: ...};
...

Current behavior 😯

Some of the issues have been identified and addressed at #39474, and they have already been resolved. However, a similar problem occurs with renderTags when using multiple.

Expected behavior 🤔

It appears that the following code also needs to be modified:
https://github.com/mui/material-ui/blob/v5.14.17/packages/mui-material/src/Autocomplete/Autocomplete.js#L506-L525

Also, the type of the props for renderOption is currently defined as React.HTMLAttributes, but in reality, it includes the key property. This might cause some confusion in TypeScript.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  System:
    OS: macOS 14.1
  Binaries:
    Node: 20.9.0 - ~/.volta/tools/image/node/20.9.0/bin/node
    Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
    npm: 10.2.3 - ~/.volta/tools/image/npm/10.2.3/bin/npm
  Browsers:
    Chrome: 119.0.6045.123
    Edge: Not Found
    Safari: 17.1
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.23
    @mui/core-downloads-tracker:  5.14.17
    @mui/icons-material: ^5.14.16 => 5.14.16
    @mui/lab: ^5.0.0-alpha.152 => 5.0.0-alpha.152
    @mui/material: ^5.14.17 => 5.14.17
    @mui/private-theming:  5.14.17
    @mui/styled-engine:  5.14.17
    @mui/system:  5.14.17
    @mui/types:  7.2.8
    @mui/utils:  5.14.17
    @mui/x-date-pickers: ^6.18.1 => 6.18.1
    @types/react: ^18.2.37 => 18.2.37
    react: ^18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: ^5.2.2 => 5.2.2

[oliviertassinari]

If it's a Next.js regression, maybe it's for them to fix it, but maybe not depending on what they say about it. If they say they will fix it in 4 weeks, I don't think it's worth it for us, if it's "normal", 👍 to handle.

At least it's a tradeoff, we are adding complexity to the codebase that is a good benefit to 1/4 of the users (Next.js userbase?) and harms a little bit 3/4.

[xaicron]

Thank you for your quick reply! And, thank you for commenting on the Next.js issue.
It indeed seems to be an issue with Next.js, and I agree that it should be addressed on the Next.js side rather than MUI's.

[nicobatalla]

This is not only in Next.js. It also happens with React starting from version 18.3.1 when not using Next.js

[oliviertassinari]

True https://github.com/facebook/react/releases/tag/v18.3.0