[internal] 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.