react-final-form-arrays

react-final-form-arrays copied to clipboard

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",

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

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?

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.

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

Same here, even initialValuesEqual workaround is not working.