[joy-ui][Autocomplete] Console error in Next.js about key prop being spread into JSX

[jmgunter]

Steps to reproduce

Link to live example: https://mui.com/joy-ui/react-autocomplete

Steps: using nextjs, open any autocomplete element with options, and you will see the console error complaining about spreading the key. "Warning: A props object containing a "key" prop is being spread into JSX:"

This issues appears to have been recently fixed with the material-ui package #39474, but not yet with the joy-ui package.

Current behavior

Expected behavior

No console warnings

Context

No response

Your environment

``` npx @mui/joy Latest version of Chrome ```

Search keywords: joy-ui nextjs warning key

[oliviertassinari]

Looks like the same as #39795

(Illustrate why we should move toward implementing Joy UI and Material UI as themes)

[arifire21]

I am also getting this error with the basic implementation of autocomplete. *edit: on a NextJS app using React 18

[ribeaud]

In my case, the problem started to show up when I updated our React dependency to v18.3. And this is the change which triggered the error (Warn when spreading key).

I am using Next v14.2.3 and this is the exact console error I got:

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: ...};
  <ForwardRef(Chip) key={someKey} {...props} />
    at Autocomplete (webpack-internal:///./node_modules/@mui/material/Autocomplete/Autocomplete.js:523:19)
    at Controller (webpack-internal:///./node_modules/react-hook-form/dist/index.esm.mjs:564:37)
...

After having tried out some strategies to solve the problem I am now convinced there is nothing I can do on my side to solve the problem. What do you think?

[plee-fn]

This is also happening in @mui/material Autocomplete component once upgrading to React 18.3. I think it could be the Chip not extracting out the key. On this line

startAdornment = value.map((option, index) => (
        <Chip
          label={getOptionLabel(option)}
          size={size}
          {...getCustomizedTagProps({ index })}
          {...ChipProps}
        />
      ));

It looks like getTagProp needs to extract the key instead of spreading it (https://github.com/mui/material-ui/blob/next/packages/mui-base/src/useAutocomplete/useAutocomplete.js#L1134)

    getTagProps: ({ index }) => ({
      key: index,
      'data-tag-index': index,
      tabIndex: -1,
      ...(!readOnly && { onDelete: handleTagDelete(index) }),
    }),

[oliviertassinari]

Let's aggregate all of those. Moving to #39833.