Input values are not updated as I type in the fields
mowses opened this issue · comments
This is more a help request than anything.
I searched in the internet, in the react docs and chatGPT, but I cant fix the issue.
The AutoFom does not update the input values as I type in the fields. I just followed the tutorial at https://uniforms.tools/docs/tutorials-basic-uniforms-usage/
I created a brand new project with the latest React version. I don't know if its a version issue or if I am missing something that is not specified in the tutorial.
Here is the component code, that is rendering OK in the browser:
import React from 'react';
import {AutoForm} from 'uniforms-unstyled';
import {bridge as schema} from '../uniforms/GuestSchema';
const Category = () => {
return (
<main className="p-6 sm:p-10 space-y-6">
<AutoForm schema={schema} onSubmit={(e) => {console.log('submit', e)}} />
</main>
);
};
export default Category;
I would not like to specify manually each field in the form, since the schema (JSONSchemaBridge) would be dynamic.
Could someone help me?
Are you using React 18 in StrictMode
?
I ran into the same problem and came across this related discussion reply #1225 (comment)
Are you using StrictMode? If so, it can be the culprit, as it's not supported yet [...]
#1194 is the conical issue tracking this aparently.
Hello @DaveLak, I am using the following versions:
"react": "18.2.0",
"uniforms": "^4.0.0-alpha.5",
"uniforms-bridge-json-schema": "^4.0.0-alpha.5",
"uniforms-unstyled": "^4.0.0-alpha.5",
React is not in the StrictMode
.
Also, I would like to point that I had to comment the keywords: ['uniforms']
because it was running into errors.
I am using this instead:
const ajv = new Ajv({
allErrors: true,
useDefaults: true,
// keywords: ['uniforms'],
keywords: {'uniforms': {}},
});
I dont know if this could give problems.
I managed to deal with form inputs doing these changes:
const [model, setModel] = useState({});
<AutoForm schema={schema} model={model} onChange={(path, value) => {
let data = _.set(model, path, value);
setModel({...model, ...data});
}}/>