Move label gen from TexWidget to FieldTemplate for bootstrap4 #2533
Conversation
|
@epicfaace , this fixes a core problem with bootstrap4 form referenced in the issue #2007. Let me know if you need anything from me to move this along. |
| {children} | ||
| {displayLabel && rawDescription ? ( | ||
| {labelComponent} | ||
| {shouldDisplayLabel && rawDescription ? ( |
There was a problem hiding this comment.
Is this same problem present in other themes? I'm wondering because, for example, material-ui looks different: https://github.com/rjsf-team/react-jsonschema-form/blob/master/packages/material-ui/src/FieldTemplate/FieldTemplate.tsx#L50 (and label gen is directly in the textwidget -- see https://github.com/rjsf-team/react-jsonschema-form/blob/master/packages/material-ui/src/TextWidget/TextWidget.tsx)
There was a problem hiding this comment.
It appears like Material-UI is also following a different approach than the core package. Here in the core package, field template owns the rendering of label (
)Reviewing the documentation, the intended behavior is what is currently happening with core package.
My suggestion is that we go ahead with the fix for bootstrap 4 here and start creating tickets/issues to track this problem in other themes.
|
This would be a great add! |
|
@newt10 If you were to update these changes on top of the v5 beta, I would be willing to review/approve. Please NOTE that the TextWidget was refactored into the new |
| }: FieldTemplateProps) => { | ||
|
|
||
| const shouldDisplayLabel = displayLabel && (label || schema.title); |
There was a problem hiding this comment.
You can use the registry.schemaUtils.getDisplayLabel(schema, uiSchema) utility here.
Fixed rjsf-team#2007 The current code for FieldTemplate and TextWidget in bootstrap 4 is incompatible with the core package. This breaks the external facing API for customizing field template. According to the core package implementation and documents, FieldTemplate is responsible for layout of labels, description, errors and help while the input widget along with the state is to be managed by the Field Component themselves (and Widgets) If a user, uses custom field template with the bootstrap 4 form, the label is displayed multiple times, once by the custom field template (as intended in the API) and second time by the TextWidget (breaks from the core package convention) This fixes the problem and updates the tests to catch any future regressions. - Updated `FieldTemplate` to output `Label` generation, adding an additional check to simply render `children` when the component is `hidden` - Updated `BaseInputTemplate`, `CheckboxesWidget`, `RadioWidget`, `SelectWidget` and `TextareaWidget`, removing the `Label` generation - Updated the test snapshots - Updated the `CHANGELOG.md` accordingly
Fixed rjsf-team#2007 The current code for FieldTemplate and TextWidget in bootstrap 4 is incompatible with the core package. This breaks the external facing API for customizing field template. According to the core package implementation and documents, FieldTemplate is responsible for layout of labels, description, errors and help while the input widget along with the state is to be managed by the Field Component themselves (and Widgets) If a user, uses custom field template with the bootstrap 4 form, the label is displayed multiple times, once by the custom field template (as intended in the API) and second time by the TextWidget (breaks from the core package convention) This fixes the problem and updates the tests to catch any future regressions. - Updated `FieldTemplate` to output `Label` generation, adding an additional check to simply render `children` when the component is `hidden` - Updated `BaseInputTemplate`, `CheckboxesWidget`, `RadioWidget`, `SelectWidget` and `TextareaWidget`, removing the `Label` generation - Updated the test snapshots - Updated the `CHANGELOG.md` accordingly
Fixed #2007 The current code for FieldTemplate and TextWidget in bootstrap 4 is incompatible with the core package. This breaks the external facing API for customizing field template. According to the core package implementation and documents, FieldTemplate is responsible for layout of labels, description, errors and help while the input widget along with the state is to be managed by the Field Component themselves (and Widgets) If a user, uses custom field template with the bootstrap 4 form, the label is displayed multiple times, once by the custom field template (as intended in the API) and second time by the TextWidget (breaks from the core package convention) This fixes the problem and updates the tests to catch any future regressions. - Updated `FieldTemplate` to output `Label` generation, adding an additional check to simply render `children` when the component is `hidden` - Updated `BaseInputTemplate`, `CheckboxesWidget`, `RadioWidget`, `SelectWidget` and `TextareaWidget`, removing the `Label` generation - Updated the test snapshots - Updated the `CHANGELOG.md` accordingly
Reasons for making this change
external facing API for customizing field template.
This fixes the problem and updates the tests to catch any future regressions.
If this is related to existing tickets, include links to them as well. Use the syntax
fixes #2007(ex:fixes #123).Checklist
Since this is a bug fix, no docs need to be updated, docs already provide the correct information on how to use custom field templates.
I have updated all the tests
Test from Playground
All tests passing