Bug: DateInput & ArrayInput - formatOnBlur triggers undefined ref in react-final-form

[SchaeVHS]

Dear Team,
many thanks for react-admin and your work!

Version
"react": "^16.7.0",
"react-admin": "^3.17.0",
"react-scripts": "4.0.3",

Code Basis of bug

<ArrayInput source="positions" >
                    <SimpleIterator > 
                        <DateInput source="delivery_date"/>
                        <DateInput source="payment_date"/>
                    </SimpleIterator>
  </ArrayInput>

Problem
If you have multiple array elements and delete an array element in the middle by clicking on the delete button,
the EDIT form is not submitted/saved when clicking on the EDIT save button.

Observation
The browser console reports

Looking at the code it is that following react-final-form code which is triggered:
https://github.com/final-form/react-final-form/blob/2d9e7129f40efd39450c1d581956e8cfce17a20a/src/useField.js#L68

This only happens in react-admin for datefields, as datefields set "formatOnBlur":

react-admin/packages/ra-ui-materialui/src/input/DateInput.tsx

Line 68 in cec6894

formatOnBlur: true,

Summary
I think it is a mixed problem:

1. React final form doesn't check the return value of getFielState()
2. react-admin SimpleFormIterator somehow deletes the fields in a way, that react-final-form still wants to iterate over it,
   although they are deleted?

I would really appreciate a fix, I have no idea how to proceed. With your help I can also offer to fix it myself,
but I'm lost. Is it react-final-form or is it react-admin which causes this?

Regards,
Daniel

[djhi]

Thanks for reporting this. As I can't reproduce this issue on our simple example (see the posts edit which has an ArrayInput with DateInputs), please provide a sample application showing the issue by forking the following CodeSandbox (https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple).

[SchaeVHS]

Many Many thanks for your template! This helped me alot!

https://codesandbox.io/s/infallible-goldberg-4pgb7?file=/src/posts/PostEdit.tsx

Steps to reproduce

• Go to posts
• Select the only post
• Delete the middle backlink
  
• Hit Save

--> Nothing happens

EDIT:
maybe related:
final-form/react-final-form-arrays#165

EDIT 2:
If I set the following line to false, my problem vanishes.
I don't know exactly what other implications I may add with this change.

react-admin/packages/ra-ui-materialui/src/input/DateInput.tsx

Line 68 in cec6894

formatOnBlur: true,

[SchaeVHS]

Do you need more information or can I help somehow? I'm still not sure, that formatOnBlur: false, is the right solution?

[SchaeVHS]

What information do you need? Please tell me.

I have the above change of formatOnBlur: false working since July and I haven't got negative feedback so far.

[djhi]

Thanks for the sandbox. We need to investigate and see if we can do something about it. In the mean time, your workaround looks correct.

[WiXSL]

@djhi, could this be closed?

[djhi]

Indeed, it should be