diff --git a/.changeset/wide-fields-extend.md b/.changeset/wide-fields-extend.md new file mode 100644 index 0000000000..557bf3c06d --- /dev/null +++ b/.changeset/wide-fields-extend.md @@ -0,0 +1,5 @@ +--- +'@tanstack/react-form': patch +--- + +Allow passing a form from `extendForm` to a field group made with the base hook's `withFieldGroup` diff --git a/packages/react-form/src/useField.tsx b/packages/react-form/src/useField.tsx index b40b1b42b3..fe3af592ae 100644 --- a/packages/react-form/src/useField.tsx +++ b/packages/react-form/src/useField.tsx @@ -498,7 +498,7 @@ export type FieldComponent< | FormAsyncValidateOrFn, in out TFormOnServer extends undefined | FormAsyncValidateOrFn, in out TPatentSubmitMeta, - in out ExtendedApi = {}, + out ExtendedApi = {}, > = < const TName extends DeepKeys, TData extends DeepValue, @@ -555,7 +555,7 @@ export type FieldComponent< export type LensFieldComponent< in out TLensData, in out TParentSubmitMeta, - in out ExtendedApi = {}, + out ExtendedApi = {}, > = < const TName extends DeepKeys, TData extends DeepValue, diff --git a/packages/react-form/src/useFormGroup.tsx b/packages/react-form/src/useFormGroup.tsx index d9d02f4989..de82fd1eb1 100644 --- a/packages/react-form/src/useFormGroup.tsx +++ b/packages/react-form/src/useFormGroup.tsx @@ -580,7 +580,7 @@ export type FormGroupComponent< | FormAsyncValidateOrFn, in out TFormOnServer extends undefined | FormAsyncValidateOrFn, in out TParentSubmitMeta, - in out ExtendedApi = {}, + out ExtendedApi = {}, > = < const TName extends DeepKeys, TData extends DeepValue, diff --git a/packages/react-form/tests/createFormHook.test-d.tsx b/packages/react-form/tests/createFormHook.test-d.tsx index c44e9fa8cc..a71b6f9c33 100644 --- a/packages/react-form/tests/createFormHook.test-d.tsx +++ b/packages/react-form/tests/createFormHook.test-d.tsx @@ -1019,5 +1019,43 @@ describe('createFormHook', () => { }) expectTypeOf(doublyExtendedForm.AppField).toBeFunction() }) + + it('should allow passing an extended form to a field group from the base hook', () => { + const BaseGroup = baseHook.withFieldGroup({ + defaultValues: { name: '' }, + render: ({ group }) => { + return ( + + {(field) => } + + ) + }, + }) + + const { useAppForm: useExtendedAppForm } = baseHook.extendForm({ + fieldComponents: { ExtendedField }, + formComponents: { ExtendedFormComp }, + }) + const extendedForm = useExtendedAppForm({ defaultValues: { name: '' } }) + const baseForm = baseHook.useAppForm({ defaultValues: { name: '' } }) + + // The extended form only adds components, so the base group accepts it + const WithExtendedForm = ( + + ) + const WithBaseForm = ( + + ) + + // The other way round still errors: the base form lacks ExtendedField + const ExtendedGroup = withExtendedFieldGroup({ + defaultValues: { name: '' }, + render: () => <>, + }) + const MissingComponents = ( + // @ts-expect-error because the base form has no ExtendedField component + + ) + }) }) })