[core] Fix a few more key spread issues (#42168)

Author: oliviertassinari

docs/data/material/components/autocomplete/CustomizedHook.js

@@ -181,20 +181,24 @@ export default function CustomizedHook() {
       <div {...getRootProps()}>
         <Label {...getInputLabelProps()}>Customized hook</Label>
         <InputWrapper ref={setAnchorEl} className={focused ? 'focused' : ''}>
-          {value.map((option, index) => (
-            <StyledTag label={option.title} {...getTagProps({ index })} />
-          ))}
+          {value.map((option, index) => {
+            const { key, ...tagProps } = getTagProps({ index });
+            return <StyledTag key={key} {...tagProps} label={option.title} />;
+          })}
           <input {...getInputProps()} />
         </InputWrapper>
       </div>
       {groupedOptions.length > 0 ? (
         <Listbox {...getListboxProps()}>
-          {groupedOptions.map((option, index) => (
-            <li {...getOptionProps({ option, index })}>
-              <span>{option.title}</span>
-              <CheckIcon fontSize="small" />
-            </li>
-          ))}
+          {groupedOptions.map((option, index) => {
+            const { key, ...optionProps } = getOptionProps({ option, index });
+            return (
+              <li key={key} {...optionProps}>
+                <span>{option.title}</span>
+                <CheckIcon fontSize="small" />
+              </li>
+            );
+          })}
         </Listbox>
       ) : null}
     </Root>

docs/data/material/components/autocomplete/CustomizedHook.tsx

@@ -179,20 +179,24 @@ export default function CustomizedHook() {
       <div {...getRootProps()}>
         <Label {...getInputLabelProps()}>Customized hook</Label>
         <InputWrapper ref={setAnchorEl} className={focused ? 'focused' : ''}>
-          {value.map((option: FilmOptionType, index: number) => (
-            <StyledTag label={option.title} {...getTagProps({ index })} />
-          ))}
+          {value.map((option: FilmOptionType, index: number) => {
+            const { key, ...tagProps } = getTagProps({ index });
+            return <StyledTag key={key} {...tagProps} label={option.title} />;
+          })}
           <input {...getInputProps()} />
         </InputWrapper>
       </div>
       {groupedOptions.length > 0 ? (
         <Listbox {...getListboxProps()}>
-          {(groupedOptions as typeof top100Films).map((option, index) => (
-            <li {...getOptionProps({ option, index })}>
-              <span>{option.title}</span>
-              <CheckIcon fontSize="small" />
-            </li>
-          ))}
+          {(groupedOptions as typeof top100Films).map((option, index) => {
+            const { key, ...optionProps } = getOptionProps({ option, index });
+            return (
+              <li key={key} {...optionProps}>
+                <span>{option.title}</span>
+                <CheckIcon fontSize="small" />
+              </li>
+            );
+          })}
         </Listbox>
       ) : null}
     </Root>

docs/data/material/components/autocomplete/Tags.js

@@ -44,9 +44,12 @@ export default function Tags() {
         defaultValue={[top100Films[13].title]}
         freeSolo
         renderTags={(value, getTagProps) =>
-          value.map((option, index) => (
-            <Chip variant="outlined" label={option} {...getTagProps({ index })} />
-          ))
+          value.map((option, index) => {
+            const { key, ...tagProps } = getTagProps({ index });
+            return (
+              <Chip variant="outlined" label={option} key={key} {...tagProps} />
+            );
+          })
         }
         renderInput={(params) => (
           <TextField

docs/data/material/components/autocomplete/Tags.tsx

@@ -44,9 +44,12 @@ export default function Tags() {
         defaultValue={[top100Films[13].title]}
         freeSolo
         renderTags={(value: readonly string[], getTagProps) =>
-          value.map((option: string, index: number) => (
-            <Chip variant="outlined" label={option} {...getTagProps({ index })} />
-          ))
+          value.map((option: string, index: number) => {
+            const { key, ...tagProps } = getTagProps({ index });
+            return (
+              <Chip variant="outlined" label={option} key={key} {...tagProps} />
+            );
+          })
         }
         renderInput={(params) => (
           <TextField

docs/pages/base-ui/api/use-autocomplete.json

@@ -197,8 +197,8 @@
     },
     "getOptionProps": {
       "type": {
-        "name": "(renderedOption: UseAutocompleteRenderedOption<Value>) => React.HTMLAttributes<HTMLLIElement>",
-        "description": "(renderedOption: UseAutocompleteRenderedOption<Value>) => React.HTMLAttributes<HTMLLIElement>"
+        "name": "(renderedOption: UseAutocompleteRenderedOption<Value>) => React.HTMLAttributes<HTMLLIElement> & { key: any }",
+        "description": "(renderedOption: UseAutocompleteRenderedOption<Value>) => React.HTMLAttributes<HTMLLIElement> & { key: any }"
       },
       "required": true
     },

packages/mui-base/src/useAutocomplete/useAutocomplete.d.ts

@@ -411,7 +411,7 @@ export interface UseAutocompleteReturnValue<
    */
   getOptionProps: (
     renderedOption: UseAutocompleteRenderedOption<Value>,
-  ) => React.HTMLAttributes<HTMLLIElement>;
+  ) => React.HTMLAttributes<HTMLLIElement> & { key: any };
   /**
    * Id for the Autocomplete.
    */

packages/mui-material/src/Autocomplete/Autocomplete.js

@@ -640,8 +640,9 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
   const renderGroup = renderGroupProp || defaultRenderGroup;
   const defaultRenderOption = (props2, option) => {
     // Need to clearly apply key because of https://github.com/vercel/next.js/issues/55642
+    const { key, ...otherProps } = props2;
     return (
-      <li {...props2} key={props2.key}>
+      <li key={key} {...otherProps}>
         {getOptionLabel(option)}
       </li>
     );