Custom enum component broken on upgrade

General
1

Hi! We were using a custom wrapper on the MaterialInputControl component in order to set a max width. It was working fine in version 2.3.2:

return (
<div className={classes.root}>
<MaterialInputControl
{...this.props}
input={MuiSelect}
options={this.props.schema.enum}
/>
</div>
)

After upgrading to 2.4.1, however, the options array no longer renders in the dropdown. Using a schema that has an enum with one element, “placeholder”, I see this html in dev tools:

<div class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiInputBase-input MuiInput-input" tabindex="0" role="button" aria-haspopup="listbox" aria-labelledby="#/properties/colors-input" id="#/properties/colors-input">
<span>&#8203;</span></div>
<input type="hidden" value="placeholder">

Does anyone have any advice on how I can get my component working again?

[original thread by sarahtrefethen]

2

Hi @sarahtrefethen(sarahtrefethen), the API of MuiSelect and therefore MaterialInputControl changed a little bit to allow for more use cases. The prop options should now be an array of objects with label and value properties.

So to adjust the code you can do this by hand or use the provided enumToEnumOptionMapper.

const options = this.props.schema.enum?.map(enumToEnumOptionMapper)

Having said that what is the specific reason that you need a custom renderer to set a max width?

I would like to suggest to check:

3

[sarahtrefethen]

Thank you!!

4

[Ricardo Guntur]

@sdirix(sdirix) Just jumping in for Sarah about those questions.

  • The goal for setting a width is to have most fields in our jsonforms be the same width. We can’t use MUI themes because we use these components in other areas and those will get affected as well.

  • We can’t trim because the width won’t match other fields in the form.

  • We can’t shrink the entire container because we have larger components that need to fill the entire space.

So we ended up going this route even though it’s more code just for a small change.

5

Hi @ricardo-guntur, thanks for the information.

Regarding theming: We also often only theme JSON Forms in a specific way and don’t want to affect the rest of the application. For this we apply the corresponding theme only to the JsonForms component. Maybe this could also be a way to go for you.

If you keep your custom renderer I would check whether you can simplify your control to look more like the MaterialEnumControl using withJsonFormsEnumProps. This way you would reuse more of JsonForms and would set you up better should there be any future changes.

However I definitely don’t know your specific requirements and environment, so maybe these suggestions simply don’t apply to your codebase and the custom renderer in its current form is the best way to go anyway.

6

[Ricardo Guntur]

Hi @sdirix(sdirix)!

A JsonForm specific theme might be a great idea. I don’t think I’ve figured out how to wrap one area with it’s own theme. But I think I can figure it out. If it works, it would help delete unneeded code on our end.

And yeah, I think Sarah implemented the withJsonFormsEnumProps!

Thanks!