Setting "valued" to an object type in a custom component

[rainman400]

There is some documentation here about using "valued" to let the component know that the custom component contains a value: https://formengine.io/documentation/custom-components#custom-component-containing-data

I was wondering how this would work for objects. I know its possible, since the dropdown component from rComponentSuite contains the value in this format, I am just not sure how to translate that into a custom component that would have a similar structure.

For more info:

• Just using "value: string.valued.default('')" within the props of define() causes it to throw an error "cannot convert [Object object] from object to string
• i can override the onChange and propagate the value of event.target.value into the custom component code itself, but the json on the formBuilder still shows an empty string.

[optimajet]

@rainman400 thanks for reporting this, we will look into supporting objects as component values.

BTW, by using the value: string.valued.default('') operator, you are "telling" FormEngine that the default value is a string.

[cherepanov]

@rainman400

We are working on implementing a plain object as a data type. Could you share your use case for this feature? RSuite dropdowns support passing a value as an object with a shallow check for the value. Although it's not documented well.

Check this demo

[rainman400]

yeah thats true.

I want to use an MUI dropdown which actually doesn't work the same way sadly. It does a check for the value as object, and throws an error.

To reproduce what I am facing, you can load the MUI dropdown the same way we load the RSuite dropdown. Alternatively, I have submitted a test repo a couple of months ago which can be used to quickly reproduce it.

[cherepanov]

Thank you! We will verify the MUI integration.

Both MUI and RSuite support passing values as either primitives or objects.

However, in RSuite, before version 5.50, setting the value as an object is not functional. This feature will necessitate an RSuite upgrade, so please be prepared.

Out of the box, these libraries are capable of handling primitive values combined with simply shaped options ({ label, value }: { string, string }).

Object values are handled differently in each library. Please check the demo for more details.

[rainman400]

This looks great.

How does the integration into formbuilder work for this as a custom component?