Start & End Adornments for all Input


thanks for the great library!

I’m wondering what the best approach is to add support for start and end adornments.

The MUI Input component that is being used for most of the JSONForms Input controls, has 2 unused properties startAdornment & endAdornment (Input API - Material UI). Both props will add an InputAdornment to respectively the start or the end of the Input.

There is currently no way of providing those adornments to the Input component, since no props can be propagated to the Input component. So an approach of Reusing existing controls, seems not viable.

This leaves us with 2 other options:

  • provide custom renderers. But this means that we would need to add custom renderers for all input types where we would like to add a start or end adornment.
  • create a PR where all of the base controls using the mui Input component:
    • are setting startAdornment & endAdornment props based on extra Schema UI options
    • are allowing for props propagation, so it would be possible to pass startAdornment & endAdornment when overriding existing controls

What do you think is best? And where can I contribute?

Kind regards,

Hello @Sewdn ,
thanks for reaching out.

The MaterialInputControl forwards additional provided properties to the used inner component, i.e. the Input component.
Thus, you could try to implement a HOC that provides the adornments to the renderers. However, you would still need to wrap and register every existing control.

I believe the best approach would be to open a feature request to track this in the JsonForms repository where this can be discussed by the team and other interested parties.

You can then contribute by opening a PR in the repository.
Entry points to add this functionality would be the components rendering the Input, e.g. MuiInputInteger.
In the example of the MuiInputInteger, it already reads the additional UI schema options via this line:
const appliedUiSchemaOptions = merge({}, config, uischema.options);
You’d then need handling to generate the adornment if the options is given.

I hope this helps and best regards,

Hi Lucas,

thanks for you reply.
I’ll soon follow up on this request by opening the feature request and start a PR.

Since I currently need only one type of StartAdornment for an Integer, I go with the custom renderer from scratch for now. The more generic approach can later be discussed in the feature request.

Kind regards,

1 Like

Hi, I added a feature request:

1 Like