I am experiencing an issue where if a value is entered in a field and in onSubmit you invalidate the form, the error disappears. See the following code sandbox:
import React, { useMemo } from "react";
import MobxReactForm from "mobx-react-form";
import { Observer } from "mobx-react";
export default function App() {
const form = useMemo(
() =>
new MobxReactForm(
{
fields: {
name: {
label: "name"
}
}
},
{
hooks: {
onSubmit: (_form) => {
// simulate a quick api call
setTimeout(() => {
// if a value was passed in for name then this
// does not work
_form.invalidate("i am an error");
}, 100);
}
}
}
),
[]
);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<Observer>{() => <input {...form.$("name").bind()} />}</Observer>
<Observer>{() => form.error && <p>{form.error}</p>}</Observer>
<button onClick={form.onSubmit}>Submit</button>
</div>
);
}
If you wait long enough or hit submit again after the first time, then it works.
However the api call that I make completes quickly and I have this problem on the first try. If no value is entered for the input then the issue does not happen.
I am experiencing an issue where if a value is entered in a field and in onSubmit you invalidate the form, the error disappears. See the following code sandbox:
https://codesandbox.io/s/intelligent-sid-jsmp85?file=/src/App.js
If you wait long enough or hit submit again after the first time, then it works.
However the api call that I make completes quickly and I have this problem on the first try. If no value is entered for the input then the issue does not happen.