[core] Fix React 18.3 warnings about spreading keys in the Material UI Autocomplete component

[heath-freenome]

This is related to #40905 only it fixes @mui/material

Iterate toward the resolution of #39833.

[mui-bot]

Netlify deploy preview

https://deploy-preview-42099--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against ceeb9fd

[DiegoAndai]

Hey @heath-freenome, thanks for working on this! We need this for #42047, but it's missing some fixes. I've updated the PR with the missing cases. Adding @ZeeshanTamboli as a reviewer.

[DiegoAndai]

@michaldudak This requires an update on mui-base, but it's only a test file, so I figure it's no problem, right?

[heath-freenome]

Hey @heath-freenome, thanks for working on this! We need this for #42047, but it's missing some fixes. I've updated the PR with the missing cases. Adding @ZeeshanTamboli as a reviewer.

@DiegoAndai Thanks for fixing that!!

[michaldudak]

This requires an update on mui-base, but it's only a test file, so I figure it's no problem, right?

No problem at all! I'll port this update to the Base UI repo as well.

[ZeeshanTamboli]

@heath-freenome Thank you for the PR. Would you like this PR to also address the issue for @mui/joy Autocomplete and thereby close #40905? Given the error in #40905 (comment), I believe it relates to the Autocomplete option. Handling the separate passing of the key for selected Chip is already taken care of in Joy UI.

[ZeeshanTamboli]

Should we consider #39795 (comment) here?

[DiegoAndai]

We could do

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

or

startAdornment = value.map((option, index) => {
  const customTagProps = getCustomizedTagProps({ index });
  return (
    <Chip
      label={getOptionLabel(option)}
      size={size}
      {...customTagProps}
      key={customTagProps.key} // specifying it after stops the warning
      {...ChipProps}
    />
  );
});

Are there other options? I'm not sure which one I like the least 😅

Also, I'm not sure if we will get the benefits with option 2: facebook/react#25697

I couldn't find much info about this warning 😓

[ZeeshanTamboli]

Option 2 is similar to what was done in #40968 (See #39795 (comment)). However, I also believe it won't make much difference, as you mentioned in facebook/react#25697 (comment). So, the current solution seems fine.

[oliviertassinari]

I think #39795 (comment) is wrong in retrospect considering how the Babel plugin is implemented: #39833 (comment). It could have worked, but it doesn't. React is relying on TypeScript to help detect key duplicates.

[ZeeshanTamboli]

Looks good. If we prefer not to address Joy UI Autocomplete in this PR (#42099 (review)), it can be handled separately. I've updated the title and label accordingly to focus on Material UI.

[oliviertassinari]

What I can read on this:

• I would expect that we need to cherry-pick this on master since it's a regression relative to React stable.
• I have grouped all the related issues under react 18.3.0 "A props object containing a "key" prop is being spread into JSX" #39833.
• I have opened [core] Fix a few more key spread issues #42168 to prove the point that there is a lot to do
• I did a quick dive into this: react 18.3.0 "A props object containing a "key" prop is being spread into JSX" #39833 (comment).
• It feels like we will need to change the API of the Autocomplete. Seeing this diff feels poor DX

           value.map((option, index) => (
-            <Chip variant="outlined" label={option} {...getTagProps({ index })} />
+            const { key, ...tagProps } = getTagProps({ index });
+            return (
+              <Chip variant="outlined" label={option} key={key} {...tagProps} />
+            );
           })
         }

[heath-freenome]

@ZeeshanTamboli Thanks for all the help on this... When will this fix be released?

[ZeeshanTamboli]

@heath-freenome Regarding for the v6 alpha release, it's scheduled for next week. However, I'm unsure about release in v5, as it wasn't cherry-picked to the master branch for v5.

[oliviertassinari]

@ZeeshanTamboli v6 alpha release*.

Could someone port this to v5?

[AdrianMetlenko]

This is still an issue in the latest Joy-UI release
Can this please be addressed!