Cannot edit the existing components

[kyuukyuusheinmoe]

Information

• Version: ^2.3.0
• Packages:
  • [^2.3.0] @tsed/react-formio

I have created a few components in form builder. After that, I need some modifications on the components that just have been created and I do some updates. Then I tried to save and the component editor form seem cracked. In the error console, it's showing the message

Example

import React from 'react';
import { FormBuilder } from '@tsed/react-formio';
import { Formio, Templates } from '@tsed/react-formio';
import tailwind from '@tsed/tailwind-formio';
import { FormBuilderComponentProps } from 'src/types/form';

Formio.use(tailwind);
Templates.framework = 'tailwind';

const FormBuilder Component= ({ value, onChange }) => {
  return (
    <FormBuilder
      display={'form'}
      components={value}
      onChange={(e) => {
        onChange({ value: e });
      }}
    />
  );
};

Acceptance criteria

• The existing components should be editable

[Romakita]

@kyuukyuusheinmoe can you create a short reproducible repo example please. Your example doesn’t give me enough to start an investigation.

see you

[kyuukyuusheinmoe]

@Romakita
I recorded the reproduction of the error I mentioned which is dragging the component and specify the atrributes at the first place works. When trying to updated the existing component cause error as I recorded.

formio.compo.edit.error.mov

[kyuukyuusheinmoe]

@Romakita , I found out the bug that it is because I used form builder as the component of React Hook Form.

That's really insane to use form builder component under another form in order to get changed component values. It's my bad.

Whenever saving component event it used the parent's container and components in order to check if the new or edited component existed in parent's component list.

First creating the component by dragging is ok and that component is in parent's component list. But editing the dragged component cannot be found in parent's component list that's why getting null. Maybe because of conflicting in finding its parent because we already have two

one is from React Hook Form and another is from Formio.

According my assumption, I took the builder out from RHF form component, it solved me the issue. Let me close the issue then.

[github-actions]

🎉 Are you happy?

If you appreciated the support, know that it is free and is carried out on personal time ;)

A support, even a little bit makes a difference for me and continues to bring you answers!

[kyuukyuusheinmoe]

It was just the bad usage of form Builder component under as the children of React Hook Form Component to maintain the form values without considering Form Builder is also a form and just thought it's just the react component.