Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
jmgunter opened this issue Feb 3, 2024 · 5 comments
Assignees
Labels
duplicate This issue or pull request already exists

Comments

@jmgunter
Copy link

jmgunter commented Feb 3, 2024

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

image

Expected behavior

No console warnings

Context

No response

Your environment

npx @mui/joy
 Latest version of Chrome 

Search keywords: joy-ui nextjs warning key

@jmgunter jmgunter added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Feb 3, 2024
@jmgunter jmgunter changed the title [joy-ui][Autocomplete] Console error in Next.js about a key prop being spread into JSX [joy-ui][Autocomplete] Console error in Next.js about key prop being spread into JSX Feb 3, 2024
@oliviertassinari oliviertassinari added component: autocomplete This is the name of the generic UI component, not the React module! nextjs labels Feb 3, 2024
@oliviertassinari
Copy link
Member

oliviertassinari commented Feb 3, 2024

Looks like the same as #39795

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

@danilo-leal danilo-leal added the package: joy-ui Specific to @mui/joy label Feb 3, 2024
@arifire21
Copy link

arifire21 commented Mar 1, 2024

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

@ribeaud
Copy link

ribeaud commented Apr 30, 2024

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
Copy link

plee-fn commented May 2, 2024

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) }),
    }),

@ZeeshanTamboli ZeeshanTamboli added core Infrastructure work going on behind the scenes and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels May 4, 2024
@oliviertassinari
Copy link
Member

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

@oliviertassinari oliviertassinari added duplicate This issue or pull request already exists and removed core Infrastructure work going on behind the scenes component: autocomplete This is the name of the generic UI component, not the React module! package: joy-ui Specific to @mui/joy nextjs labels May 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
duplicate This issue or pull request already exists
Projects
None yet
Development

No branches or pull requests

8 participants