Should "useFieldArray append" types behave the same as the defaultValues type?

[mauriciosoares]

When using an array of objects with react-hook-form, the default values accepts that the keys from the object can be undefined, even though that the schema says that these are mandatory. And that's great since I can initialize my form with an empty state:

However, when using append from the useFieldArray method, I'm forced to set a value for the keys of the object I'm appending into the form. For me that's a problem because I want to append a value that's completely empty, the same way as the default value, so the user can add the initial data on it

So my question is, should the append behave the same as the default values? Allowing us to add an empty value for the initial appended data?

Here's a code sandbox with an example:

https://codesandbox.io/s/youthful-faraday-feem73?file=/src/index.tsx

Thanks!

[leapful]

@mauriciosoares

react-hook-form allows to input partial default values because there is always a reasonable case when providing full default values object is not needed, therefore on all fields passed to defaultValues can be optional.

append method is not the same because you should know exactly what should be appended at the time triggering append.

If you want to make it consistent, I would recommend to use empty string as default value for useForm hook and also for append method.

[mauriciosoares]

Well, I came across another scenario that's not specific to strings, but is also related to the types on append vs defaultValues.

Consider that we have a field that is a non empty array, lets say tickets. we'd type it as a nonempty array with zod so react-hook-form can throw errors if the user tries to submit the form if that array is empty.

When we set the default values, we can set it as empty, because this might be a user input based field, they'll add an array of ticket numbers that only they are aware of...

However when appending a new item to the array list, now I can't set it as an empty array, because of the nonempty type. And I can't really fill it in with a random empty string, because that'd break the form validation. I updated the codesandbox example with the code for that scenario above

https://codesandbox.io/s/youthful-faraday-feem73?file=/src/index.tsx

append method is not the same because you should know exactly what should be appended at the time triggering append.

I think that is not a reality in practice, the append method is used to add a brand new field to the form for the user to type his info, having to prefilling it with data, even if it's just dummy data as a string in an array, is not always possible.

[andho]

append method is not the same because you should know exactly what should be appended at the time triggering append

It's not possible to know exactly what should be appended because we are expecting the user to provide this info. When the fields are displayed after appending, the user will input the values and at that point we will know the exact values. But to come to this point, we already need to call append. Is this not the use case for append?

[thiago-silva-ac]

Having same issue but mine is with dates, how can i create a empty Date object? With default value I used undefined but append doesn't accept it.

[andho]

Same thing with numbers.

[juno7803]

Having same issue here. I want to append form by same type of defaultValues. (empty state)

[hueindahaus]

I don't understand the design choice of having to know exactly what should be filled in when adding another form component...

[25747]

i'm having the same issues with dates and numbers. i am trying to work around it by tweaking some type definitions and Yup schema, but it isn't pretty and breaks our existing form patterns.

[wadeamaral]

Same issue here. Allowing for undefined values in append would be extremely helpful.

[lazcanoluca]

Same, it doesn't seem right that append requires valid default values. I believe it'd be much easier and consistent would they behave like defaultValues, unless I'm missing something.

[coded58]

seems this hasn't been resolved? same issue with @thiago-silva-ac, appending both date and numbers. Having a number input and when user appends we default it to 0 doesn't look great, same with dates

[mauriciosoares]

Hey @bluebill1049, as you're the official maintainer of react-hook-form I wanted to tag you in this discussion so you can give your thoughts. Quite a few people are having the same issue that I brought up initially, is there any major drawbacks on making the append method accept Partial values from the schema like the defaultValues?

[perevezencev]

+1

[barbenezra]

+1 on this one
would be very helpful

[ImHamba]

+1, it makes no sense to append fields to a form that are meant to be filled by the user (e.g. a user defined number of entries to fill) but expect to have the data already to include in the append call

[aq1018]

This is really a questionable design choice. This is how I worked around it in typescript though. It's ugly, but it works

append({
  name: '', // string, give it empty string
  type: '' as SomeEnum, // enum, use empty string and type cast to enum
  amount: '' as unknown as number, // number, lie to TS basically,
  date: '' as unknown as Date, // date object, just keep lying to TS... :(
})

[salmanbabri]

I was recently working on an old project with controlled component forms. This is exactly what I did in the initial state.

Its kinda ugly at first. But I made it a bit less distracting by extracting empty states into a utils file like this:-

export const emptyNumber = "" as unknown as number;

[iffa]

Here's a patch compatible with version 7.52.1 for those that want to take this approach instead:

diff --git a/node_modules/react-hook-form/dist/types/fieldArray.d.ts b/node_modules/react-hook-form/dist/types/fieldArray.d.ts
index 5fa9572..db63797 100644
--- a/node_modules/react-hook-form/dist/types/fieldArray.d.ts
+++ b/node_modules/react-hook-form/dist/types/fieldArray.d.ts
@@ -2,6 +2,7 @@ import { FieldValues } from './fields';
 import { Control } from './form';
 import { FieldArrayPath, FieldArrayPathValue } from './path';
 import { RegisterOptions, Validate } from './validator';
+import { DeepPartial } from './utils';
 export type UseFieldArrayProps<TFieldValues extends FieldValues = FieldValues, TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>, TKeyName extends string = 'id'> = {
     name: TFieldArrayName;
     keyName?: TKeyName;
@@ -97,7 +98,7 @@ export type UseFieldArrayPrepend<TFieldValues extends FieldValues, TFieldArrayNa
  * </button>
  * ```
  */
-export type UseFieldArrayAppend<TFieldValues extends FieldValues, TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>> = (value: FieldArray<TFieldValues, TFieldArrayName> | FieldArray<TFieldValues, TFieldArrayName>[], options?: FieldArrayMethodProps) => void;
+export type UseFieldArrayAppend<TFieldValues extends FieldValues, TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>> = (value: FieldArray<DeepPartial<TFieldValues>, TFieldArrayName> | FieldArray<TFieldValues, TFieldArrayName>[], options?: FieldArrayMethodProps) => void;
 /**
  * Remove field/fields at particular position.
  *

[nuclei272]

This fixed it for me. Thanks!

[TheDevick]

Apparently this is the only way to solve the issue, thanks!

But modifying node_modules folder is, of course, far from ideal.

@iffa could you open a PR to the repository to fix that?

[gergelykisshun]

I had the same problem.

I resorted to adding .nullable() in zod to the field and use null in append() for the field.

This caused the field not to be required anymore, so I added a superRefine to check for the field and make it required. Super hacky... would be solved if append would work the same as defaultValues and can accept Partial values.

[Gustavo-Pauli]

Did someone created an issue for this?

[TheDevick]

Yep, this issue seems to persist.

I’m currently trying to display placeholder text in a select input, but it’s basically impossible because I need the value to be defined, and apparently, the only way to display the placeholder is setting the value as null.

So, @bluebill1049 , can you help us here? Thanks!

[daniel-barhanin]

I'm having the same problem, will there soon be a fix for it? @iffa will this patch be deployed?