Input values are not updated as I type in the fields

[mowses]

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?

[DaveLak]

Are you using React 18 in StrictMode?

I ran into the same problem and came across this related discussion reply https://github.com/vazco/uniforms/discussions/1225#discussioncomment-5078797

Are you using StrictMode? If so, it can be the culprit, as it's not supported yet [...]

https://github.com/vazco/uniforms/issues/1194 is the conical issue tracking this aparently.

[mowses]

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.

[mowses]

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});
}}/>