Description
Are you submitting a bug report or a feature request?
Bug report
What is the current behavior?
Starting from final-form v4.20.3 and above, checkboxes with array field names (e.g. choices[]) started working unexpectedly, they used to work properly until v4.20.2.
final-form@4.20.2
When using final-form@4.20.2:
"final-form": "4.20.2",
"react-final-form": "^6.5.9",
The code below works as expected (v4.20.2 Codesandbox):
/* eslint-disable jsx-a11y/accessible-emoji */
import React from "react";
import { render } from "react-dom";
import { Form, useField } from "react-final-form";
const FinalFormCheckbox = ({ name, value, label }) => {
const renderProps = useField(name, {
type: "checkbox",
value
});
return (
<label>
<input name={name} type="checkbox" value={value} {...renderProps.input} />
<span>{label}</span>
</label>
);
};
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const onSubmit = async (values) => {
await sleep(300);
window.alert(JSON.stringify(values, 0, 2));
};
const App = () => (
<>
<h1>React Final Form - Checkbox Example - v4.20.2 - OK </h1>
<Form
onSubmit={onSubmit}
initialValues={{}}
render={({ handleSubmit, form, submitting, values }) => (
<form onSubmit={handleSubmit}>
<div>
<FinalFormCheckbox
name="choices[]"
value="choice_1"
label="Choice 1"
/>
<FinalFormCheckbox
name="choices[]"
value="choice_2"
label="Choice 2"
/>
<FinalFormCheckbox
name="choices[]"
value="choice_3"
label="Choice 3"
/>
</div>
<div className="buttons">
<button type="submit" disabled={submitting}>
Submit
</button>
<button type="button" onClick={form.reset} disabled={submitting}>
Reset
</button>
</div>
<pre>{JSON.stringify(values, 0, 2)}</pre>
</form>
)}
/>
</>
);
render(<App />, document.getElementById("root"));If you check both Choice 2 and Choice 3 you get this shape of data for values:
{
"choices": [
"choice_2",
"choice_3"
]
}
Checkboxes appear to be checked:
final-form@^4.20.3, up to v4.20.7
On the other hand, when using final-form@4.20.3 and above (e.g. v4.20.7):
"final-form": "^4.20.3",
"react-final-form": "^6.5.9",
The same code used above for v4.20.2 doesn't work as expected in version 4.20.3 and upwards:
If you check both Choice 2 and Choice 3 you get this wrong shape of data for values:
{
"choices": [
[
"choice_3"
]
]
}
Also, checkboxes remain in an unchecked state, despite having been checked:
What is the expected behavior?
v4.20.3 and above (e.g. v4.20.7) should behave consistently as version v4.20.2.
Sandbox Link
What's your environment?
Google Chrome