formio / react

JSON powered forms for React.js
https://form.io
MIT License
315 stars 269 forks source link

FormBuilder with initialForm prop breaks React state updates #576

Open DevTakao opened 3 months ago

DevTakao commented 3 months ago

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.

lane-formio commented 1 month ago

Could you provide a reproducible example in a codesandbox and I can help get this triaged quicker?

DevTakao commented 1 month ago

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