Problem
I have a form with react-final-form. In the form I use the OnChange component from react-final-form-listeners. This OnChange component is used to control the behavior of a Select component within the form. It seems to be working fine. The values of the form are updated properly, but the problem is that somehow the submission does not work all the time - i.e. the onSubmit function is not called when clicking the submit button. It only works if a different value than the Select component is changed. If the only changed value is the Select component, the submission does not happen.
This only happens for the Select component. If you change something like a text field within the form (or anything that does not use this custom OnChange component) and then click the submit button, the onSubmit function is called normally. I suppose this happens because there is some behind the scenes validation happening in the background and this does not detect any changes to the form state (?), thus not allowing the onSubmit function to be called.
My code looks something like this:
<Form
onSubmit={async (values) => {
//submit logic
}}
initialValues={initialValues}
render={({ handleSubmit, submitting, submitError, values, form }) => {
return (
<form onSubmit={handleSubmit}>
<Select
variant="standard"
disabled={disabled}
name="type"
label="Type"
required={true}
formControlProps={{ fullWidth: true }}
inputProps={{
name: "type",
id: "type",
}}
>
{["test1", "test2"].map((item, index) => (
<MenuItem key={index} value={item}>
{item}
</MenuItem>
))}
</Select>
<OnChange name="type">
{(value) => {
if (value === "test1") {
//logic
}
}}
</OnChange>
<Button type="submit">Save</Button>
</form>
);
}}
/>;
Question
Why isn't the onSubmit function called?
What I tried
I tried to manually add an onClick listener to the button and call the handleSubmit function to see it this somehow changes it, but the same behavior was happening (which makes sense, I suppose).
