initialValue on BooleanInput inside ArrayInput resets value of BooleanInput on Edit

[DjebbZ]

What you were expecting:
When editing a record that contains a BooleanInput inside an ArrayInput, the BooleanInput should have the last known value.

What happened instead:
When editing, the BooleanInput displays the initialValue. Which means that after saving the BooleanInput is reset to its initialValue.

Steps to reproduce:
In the CodeSandbox below :

1. Click on the SHOW of the first record in the Posts list
2. Notice that the boolean value of the first element of Backlinks array is set to true
3. Click on EDIT
4. Notice that the BooleanInput is not set to true but to false
5. Go back to SHOW without saving and notice the value is true so it should be true in the edit view
6. Now click on EDIT, then SAVE without changing anything
7. Notice that the boolean field is now false instead of true.

Related code:
https://codesandbox.io/s/brave-dhawan-l5sfk

Other information:

Environment

• React-admin version: 3.17.0
• Last version that did not exhibit the issue (if applicable): don't know, but the version of react-admin in the simple example CodeSandbox (3.12.4) also exhibits the issue
• React version: 17
• Browser: Tested in Chrome, Firefox, Brave.
• Stack trace (in case of a JS error): No stack trace.

(ping @dorian-ubisoft)

[DjebbZ]

Sorry, did you have time to look at it ?

[fzaninotto]

Confirmed, thanks for the report.

[fzaninotto]

This looks like a bug in react-final-form-arrays. I'll investigate further, but I'm not sure there is something we can do about it.

[fzaninotto]

The problem doesn't lie in the ArrayInput logic: even when using BooleanInput outside of an ArrayInput, I manage to reproduce the bug.

https://codesandbox.io/s/billowing-star-s9mzv?file=/src/data.tsx

[fzaninotto]

As my Codesandbox shows, the problem seems to be in react-final-form's handling of initialValue with a value false on a single input.

As a workaround, setting the initialValues on the form doesn't seem to trigger the bug.

[fzaninotto]

The problem isn't in react-final-form's handling of initialValue with false value, as this simpler CodeSandbox shows:

https://codesandbox.io/s/lively-darkness-jvst7?file=/src/App.js

[fzaninotto]

I traced the bug to

react-admin/packages/ra-core/src/form/useInput.ts

Lines 117 to 134 in b007fb7

	useEffect(() => {
	if (input.value != null && input.value !== '') {
	return;
	}
	// Apply the default value if provided
	// We use a change here which will make the form dirty but this is expected
	// and identical to what FinalForm does (https://final-form.org/docs/final-form/types/FieldConfig#defaultvalue)
	if (defaultValue != null) {
	form.change(source, defaultValue);
	}
	if (initialValue != null) {
	form.batch(() => {
	form.change(source, initialValue);
	form.resetFieldState(source);
	});
	}
	}, [recordId, input.value, defaultValue, initialValue, source, form]);

For mysterious reasons, the input.value is undefined for boolean inputs, while it has the right record value for NumberInputs. So this effect considers the input as empty, and sets the value to the initialValue.

Now why is the final-form input value undefined in the first place?

[fzaninotto]

OK, the problem comes from the fact that final-form doesn't set input.value for fields of type "checkbox". Apparently, that's a feature.

So we can't base our decision to reset the field to its default value just on the presence of a value ; we must also see if the input checked isn't undefined.

Fix incoming!