Merge pull request #49405 from gijoe0295/gijoe/49064

fix: a props object containing `key` prop is spread into jsx

Author: puneetlath

src/components/Form/InputWrapper.tsx

@@ -76,10 +76,16 @@ function InputWrapper<TInput extends ValidInputs, TValue extends ValueTypeKey>(p
     const {registerInput} = useContext(FormContext);
 
     const {shouldSetTouchedOnBlurOnly, blurOnSubmit, shouldSubmitForm} = computeComponentSpecificRegistrationParams(props as InputComponentBaseProps);
+    const {key, ...registerInputProps} = registerInput(inputID, shouldSubmitForm, {ref, valueType, ...rest, shouldSetTouchedOnBlurOnly, blurOnSubmit});
 
-    // TODO: Sometimes we return too many props with register input, so we need to consider if it's better to make the returned type more general and disregard the issue, or we would like to omit the unused props somehow.
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    return <InputComponent {...registerInput(inputID, shouldSubmitForm, {ref, valueType, ...rest, shouldSetTouchedOnBlurOnly, blurOnSubmit})} />;
+    return (
+        <InputComponent
+            key={key}
+            // TODO: Sometimes we return too many props with register input, so we need to consider if it's better to make the returned type more general and disregard the issue, or we would like to omit the unused props somehow.
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...registerInputProps}
+        />
+    );
 }
 
 InputWrapper.displayName = 'InputWrapper';

src/components/MenuItemList.tsx

@@ -82,16 +82,16 @@ function MenuItemList({
 
     return (
         <>
-            {menuItems.map((menuItemProps) => (
+            {menuItems.map(({key, ...menuItemProps}) => (
                 <OfflineWithFeedback
-                    key={menuItemProps.key ?? menuItemProps.title}
+                    key={key ?? menuItemProps.title}
                     pendingAction={menuItemProps.pendingAction}
                     onClose={menuItemProps.onPendingActionDismiss}
                     errors={menuItemProps.error}
                     shouldForceOpacity={menuItemProps.shouldForceOpacity}
                 >
                     <MenuItem
-                        key={menuItemProps.key ?? menuItemProps.title}
+                        key={key ?? menuItemProps.title}
                         wrapperStyle={wrapperStyle}
                         onSecondaryInteraction={menuItemProps.link !== undefined ? (e) => secondaryInteraction(menuItemProps.link, e) : undefined}
                         ref={popoverAnchor}