FormBuilder with initialForm prop breaks React state updates
Describe the bug
FormBuilder component causes React to not trigger state updates when initialForm prop is given a schema JSON. As warned in the documentation, I made sure the value is a stable reference by importing a constant JSON file.
To Reproduce
import { useState } from 'react';
import { FormBuilder, FormType } from '@formio/react';
import jsonData from '@/formSchemas/myForm.json';
const MyFormBuilder = () => {
const [schema, setSchema] = useState<FormType>(jsonData as FormType);
const onFormChange = (schema: FormType) => {
setSchema(schema);
};
return (
<div className="grid grid-cols-3">
<div className="col-span-2">
<FormBuilder initialForm={jsonData as FormType} onChange={onFormChange} />
</div>
<div className="schema-preview">
<pre className="bg-slate-500 text-white p-2 max-h-[300px] overflow-auto">
{JSON.stringify(schema, null, 2)}
</pre>
</div>
</div>
);
};
Expected behavior The schema-preview section should update when a component is dragged into the builder and saved.
Could you provide a reproducible example in a codesandbox and I can help get this triaged quicker?
I could not reproduce the issue in codesandbox. Might be related to Vite + React setup as it was how I had set up locally when the issue happened. Will confirm it first and get back here