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

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

Merged
merged 4 commits into from
Sep 19, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions src/components/Form/InputWrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
6 changes: 3 additions & 3 deletions src/components/MenuItemList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Loading