Weird behaviour when updating a field

[Kamahl19]

Describe the bug and the expected behavior

There is an external store and I need to update the form field when value in the store changes. I have used form.update for this and found 3 things I consider weird or buggy behaviour. Or maybe I just dont understand something.

Conform version

v1.1.0

Steps to Reproduce the Bug or Issue

1. Reproduction https://stackblitz.com/edit/remix-run-remix-zliqsr?file=app%2Froutes%2F_index.tsx
2. Click on "Set age to 50"
3. For some reason, after using form.update, the getInputProps() now returns 2 more props: 'key' and 'defaultValue'. I found this because I got an error A props object containing a "key" prop is being spread into JSX
4. Click on "Reset"
5. Age was not reset to an empty value. I suppose it is because of this line

   conform/packages/conform-dom/form.ts

   Line 437 in 59156d7

   meta.initialValue = clone(meta.initialValue);

   But why is that? Should updating a form field programatically also change its initial value? It breaks the Reset functionality.
6. Click on "Set age to undefined"
7. Nothing happens, Age stays on 50 because of this line

   conform/packages/conform-dom/form.ts

   Line 342 in 59156d7

   if (typeof value !== 'undefined') {

   . Why is it ignoring undefined value? I am able to set undefined as default value therefor I would expect to also set undefined programatically via form.update.
8. Click on "Reset" and field is cleared. This is probably happening because we clicked on "Set to Undefined" before. So does it mean when we do form.update(undefined) it does not change the field value but for some reason makes the next reset to obey undefined?

What browsers are you seeing the problem on?

Chrome

Screenshots or Videos

No response

Additional context

What I propose:

1. form.update(undefined) works the same way as setting undefined to defaultValue (it basically clears the input)
2. form.update() does not change the default value of the field so that form.reset() sets the field to the initial default value
3. form.update() probably should add the key prop to the getInputProps

[edmundhung]

I thought some of the behaviours you mentioned is a bug. But it is actually working as expected:

For some reason, after using form.update, the getInputProps() now returns 2 more props: 'key' and 'defaultValue'. I found this because I got an error A props object containing a "key" prop is being spread into JSX

Conform utilize key to update / reset field values because we are working with uncontrolled input. There is no key by default. But a key will be generated when a field is updated / reset so React will re-mount the input with the new value. A props object containing a "key" prop is being spread into JSX is a new warning introduced on React recently <input {...getInputProps(fields.age, { type: 'number' })} key={fields.age.key} /> will remove the warning. There is nothing I can help because that was the whole point of spreading an object but the react team wanna make key explicit.

Click on "Reset". Age was not reset to an empty value. I suppose it is because of this line

This is because of how you set the default value:

defaultValue: {
  name: externalStore.name,
  age: externalStore.age,
},

Conform will use the latest default value on reset and so it is resetting the age field to 50.

Click on "Set age to undefined". Nothing happens, Age stays on 50 because of this line

You can use form.update to update value or the validated state. Passing undefined on value means keeping the field value as is. If you wanna clear the value, please set it to an empty string, e.g. form.update({ name: fields.age.name, value: externalStore.age ?? '' })

Click on "Reset" and field is cleared. This is probably happening because we clicked on "Set to Undefined" before.

The defaultValue (externalStore.age) for age is now undefined and so Conform reset it to undefined.

[Kamahl19]

@edmundhung Thanks for the answer! I have only noticed it now.

This is because of how you set the default value

Default value for age is set like this age: externalStore.age. At the time of the first render, it is undefined, so defaultValue.age is undefined. Why when I click on reset, it does not go back to undefined (the true default value) but it uses the "current" default value? I suppose the default value should behave same as the initial value of the useState hook or initialState of the useActionState. IMHO only the value from first render should be considered and the rest should be ignored. I believe this is also how default value in react-hook-form works.

Passing undefined on value means keeping the field value as is. If you wanna clear the value, please set it to an empty string

I consider this confusing because the undefined behaves differently in form.update (it causes ignore) and differently in defaultValue (it translates to an empty string). IMHO these should be inlined and form.update should only ignore fields that are not passed to the update function.