arrays get reset with pristine values on change

[mschipperheyn]

Are you submitting a bug report or a feature request?

Bug report

What is the current behavior?

I have a form with the following characteristics: My initial values are as follows:

{
    apis: []
}

<Form
    onSubmit={this.handleSubmit}
    validate={this.handleValidate}
    validateOnBlur={true}
    initialValues={{
         apis: []
    }}
    keepDirtyOnReinitialize={true}
    mutators={mutators}
    subscription={{
        value: true,
        submitting: true,
        validating: true,
    }}
    render={renderProps => (
        <React.Fragment>
            <FormDebugger form={formName} />
            {render(renderProps)}
            <FormSpy
                subscription={formSpySubscription}
                onChange={this.handleSubmitSuccess}
            />
        </React.Fragment>
    )}
    />

<FieldArray name="apis">
    {({ fields }) => (
        <React.Fragment>
            <FormControl className={classes.inputLabel}>
                <InputLabel htmlFor="api">Select an API</InputLabel>
                <Select
                    value={selected}
                    onChange={this.handleChange}
                >
                    <MenuItem key="item" value={null}>
                        Select an API
                    </MenuItem>
                    {Object.values(apiConstants)
                        .filter(
                            ky => !values.apis.find(el => el.api === ky.value)
                        )
                        .map(el => (
                            <MenuItem key={el.value} value={el.value}>
                                {el.key}
                            </MenuItem>
                        ))}
                </Select>
            </FormControl>
            <IconButton onClick={this.handleSelect(fields)}>
                <PlusIcon />
            </IconButton>
            <Table>
                <TableBody>
                    {fields.map((name, index) => (
                        <TableRow key={name}>
                            <TableCell component="th" scope="row">
                                <Field
                                    name={`${name}.api`}
                                    readOnly
                                    component={TextInput}
                                />
                            </TableCell>
                            <TableCell>
                                <Field name={`${name}.value`} component={TextInput} />
                            </TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </React.Fragment>
    )}
</FieldArray>

When I select an item in the Select component a state change occurs and the entire form resets with keepDirtyOnReinitialize=false or it keeps the changes with keepDirtyOnReinitialize=true but after adding a first api, the second state change causes the api[0] to be set to undefined.

What is the expected behavior?

It should not reset form state on a state change.

What's your environment?

"node": "8.12.0",
"react": "16.6.0",
"final-form": "4.11.0",
"final-form-arrays": "1.1.1",
"react-final-form": "4.0.2",
"react-final-form-arrays": "2.0.1",

[ilanben]

I have the same problem and I have set initialValuesEqual={() => (true)} until the bug gets fixed

[lukejsimonetti]

I have the same issue. keepDirtyOnReinitialize isn't working. I've created a codesandbox to demo the problem. FieldArray Bug Demo Seems like a state change -> rerender is whats clearing the out the additional values.

Any update on this bug?

[jwld]

Also encountering a similar issue when using useState in the same component in which the Form is rendered. Moving useState down into a child component fixes it for now.

[wdfinch]

Any updates on this. Would be great if this could work by default without having to use initialValuesEqual.

[insanicly]

Same here, even initialValuesEqual workaround is not working.