Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FormBuilder with initialForm prop breaks React state updates #576

Open
DevTakao opened this issue Aug 22, 2024 · 2 comments
Open

FormBuilder with initialForm prop breaks React state updates #576

DevTakao opened this issue Aug 22, 2024 · 2 comments
Assignees

Comments

@DevTakao
Copy link

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
Copy link
Contributor

lane-formio commented Oct 4, 2024

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

@DevTakao
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants