Problem in saving form when remove a dateInput in ArrayInput / SimpleFormIterator

[bbelletoile]

What you were expecting:

I should be able to save a form after removing dateInput items (with - button) in SimpleFormItterator

What happened instead:

Steps to reproduce:

-> We have an arrayInput of dateInput, with two fields (with a remove button).
-> We remove the first item of the arrayInput.
-> But, when we try to save the global form, we have an error (see the previous screenshot).

Related code:

Main form :

<Edit title={<PostTitle/>} {...props} >  
  <TabbedForm {...props} validate={formValidator}>  
    <FormTab label="Closing days">  
      <ExceptionalClosingDay/>  
    </FormTab>  
  </TabbedForm>  
</Edit>  

ExceptionalClosingDay component :

<ArrayInput source={props.arraySource}>
  <SimpleFormIterator>
    <DateInput label={props.dateInputLabel} source="" parse={dateParser}/>
  </SimpleFormIterator>
</ArrayInput>

Other information:

We investigated the problem. In simpleFormIterator component, we have two arrays ("ids" and "fields"). When we remove a field, we call removeField on simpleFormIterator. We splice from the index one element, from ids current (the indexes of existing fields elements), then we remove the field from fieldArray. Next, we update ids current with the new length of fields array, but we observe that fields length has not changed before updating ids arrays. So, when we save, we have ids table with more elements in ids array than fields array.
Code

Example :
ids => [0|1|2]
fields => [0|1|2]
When we remove the second element (index 1) before saving:
ids => [0|2]
fields => [0|1|2] (doesn't change when debugging)
When we update ids array, we use nextId const (fields array length) but fields array length doesn't change. So, ids array contains [0|1|2] instead of [0|1]
After removing the field, we have:
ids => [0|1|2]
fields => [0|1]
So, when we save, we have problem with field of index 2 (it doesn't exist). We can't save.

Environment

• React-admin version: 3.16.3
• React version: 17.0.2
• Browser: Chrome (v92.0.4515.159)

[AuliaYF]

Is it possible that you didn't specify the input source prop?

Taken from doc

import { ArrayInput, SimpleFormIterator, DateInput, TextInput } from 'react-admin';

<ArrayInput source="backlinks">
    <SimpleFormIterator>
        <DateInput source="date" />
        <TextInput source="url" />
    </SimpleFormIterator>
</ArrayInput>

[bbelletoile]

That's not the problem because we have a parser. Our data is well displayed, but the problem appears when we try to save after deleting the first element (when we have two in the list).

[djhi]

Without a source, we can't register the field inside final-form. This is not a supported case

[bbelletoile]

@djhi the problem is not related to the source, because we have a parser, so the component will use the data returned by the parser. Even with a source we have the problem. Here is our problem, it happens when we try to save after deleting the first element:

[fzaninotto]

I confirm that I can reproduce it in the simple example:

1. Edit a post,
2. Go to the Misc tab,
3. add 2 backlinks,
4. remove the first one,
5. try to save the form.

So I'm reopening it and marking it as a bug.

[michaelakerr]

I think I have this issue when trying to remove more than 1 item from an arrayInput. Repeatable as above.