Custom widget for array always shows label

[doronrosenberg]

Prerequisites

• [X] I have searched the existing issues
• [X] I understand that providing a SSCCE example is tremendously useful to the maintainers.
• [X] I have read the documentation
• [X] Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

core

Version

5.x

Current Behavior

Using a custom widget set via ui:schema for an array field, the label is being rendered by rjsf even if the label is disabled in ui:schema. If I remove the custom widget, the label is properly hidden, so seems to be an issue with custom widgets for array types.

See See https://codesandbox.io/s/rough-bird-f7yf2k for a simple reproduction.

Note that A list of strings, the label for the field, is still showing.

From reading the documentation, this should be the correct way to hide the labels, and it works for non-array overrides.

Expected Behavior

If I override the rendering of a type using my custom widget, I would expect to be in full control and be able to hide everything related to the field I am taking over. Its part of what makes rjsf so powerful with the ui:schema.

Steps To Reproduce

See https://codesandbox.io/s/rough-bird-f7yf2k.

Environment

No response

Anything else?

Thanks!

[heath-freenome]

What are you trying to do with the widget and the array field. Perhaps you can override one of the Array-based templates instead?

[doronrosenberg]

The requirement is to have a grid/table based editor for certain array types. Since we are using a third party grid library, using the templates would likely not work too well since the grid wants to handle the rendering itself.

The use of custom ui:widget here works perfectly for us, its just that the label for the field always renders which seems like a bug to me. If you agree that it should be hidden and can point at roughly where the code for this is, I could take a stab at a pr for this.

[heath-freenome]

It should be being hidden by the FieldTemplate or maybe something in your implementation is using the TitleFieldTemplate and you need to call the schemaField.getDisplayLabel() function yourself?

[doronrosenberg]

Per the reproduction at https://codesandbox.io/s/rough-bird-f7yf2k, you can see that using a ui:widget to override a field and using ui:options to hide the label doesn't work. Not using templates at all, just purley overriding it using ui:widget

[heath-freenome]

@doronrosenberg I was pointing you in the direction of the code

[doronrosenberg]

My bad! The issue is indeed that getDisplayLabel() is returning true in this case, will take a look to see why.

btw, https://rjsf-team.github.io/react-jsonschema-form/docs/contributing#development-server says you need to restart the dev server when making changes, but vite is using HMR to update the code on the fly as I make changes.

[doronrosenberg]

There are two questions I have on fixing this:

First, in https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/utils/src/schema/getDisplayLabel.ts#L37 the default value for showing the label is read from ui:schema but then depending on the schema that value can be overriden. I understood ui:schema as being the override, so if label is set to false it should just return false immediately instead of doing the schema checks.

The second way to fix it is this if statement(https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/utils/src/schema/getDisplayLabel.ts#L46), where if we have a customWidget we will always show the label. If a custom widget is present, the label should probably be hidden.

|| isCustomWidget(uiSchema);

becomes:

&& !isCustomWidget(uiSchema);

To me it looks like there are two bugs here (ui:schema not being the final override, custom array widgets result in label being shown), but defer to what you would consider the correct fix.

[heath-freenome]

I would say, if uiOptions.label is false, exit immediately.

[Deep-z21]

Hey @doronrosenberg I am also working on making a tabular UI for array items. So, like if there are 5 entries in an array then it should get represented in a tabular way. But I am not able to find a correct approach because firstly, I thought of overriding ArrayFieldItemTemplate but then problem was that whole aggregate formData is not coming at once, its coming to template item wise. Any solutions ?