[BUG] Support for Custom Components React 18.x Component Detaches from Validation

[jake-pharr]

Environment

Please provide as many details as you can:

• Hosting type
  • [x] Form.io
• [ x ] Local deployment
  • Version:
• Formio.js version: "^4.14.8" Frontend framework: "react": "^18.1.0", "@formio/react": "^5.2.4-rc.1", Browser: Any Browser version: Any

Steps to Reproduce

1. Implement custom Formio Component as checkmatrix.js example

Expected behavior

Custom Input to be validated against the rest of Form

Observed behavior

Input is not bound to Form validation with ReactDOMClient.createRoot

  let root = ReactDOMClient.createRoot(element);
  root.render(...)

Example

If possible, please provide a screenshot, live example (via JSFiddle or similar), and/or example code to help demonstrate the issue.

Demo available at: https://codesandbox.io/s/nifty-gwen-6z4k9i

For code or form JSON, please enclose in a code block:

// your code here

[brendanbond]

Thanks for the bump on this. I have a date with a deep dive on the React renderer soon and will keep 18+ compatibility at the top of the list.

[jake-pharr]

Thanks @brendanbond .

[hokwanhung]

Hi @brendanbond, may I know whether you are planning to resolve this issue in any recent months? I appreciate the idea of Form IO and if possible, I could take on and work on this issue.

I have up to 2 years of experience working on ReactJS, Typescript and so on, and could contribute something. Let me know what you think. Thanks.

[brendanbond]

@hokwanhung PRs are welcome! '24 is the year for the react renderer if I get my way 😂

[hokwanhung]

@brendanbond Thank you for your kind welcome, and I hope you are having a great night😄.

As I dive into the project, I realise that not only code needs to be implemented, but also the testing (as currently enzyme does not support react-18, and that breaks all tests, and it might need to be changed into RTL or other libraries).

Would you prefer me to submit a single PR request, or divide it into multiple ones? My current estimation would be two:

1. Convert current testing enzyme library into RTL (or any libraries you want).
2. Enable support for react-18 with current codes (main changes in ReactComponent I think).