react-jsonschema-form
react-jsonschema-form copied to clipboard
Option to hide dropdown for single-option oneOf / anyOf / allOf
Prerequisites
- [X] I have read the documentation
What theme are you using?
core
Is your feature request related to a problem? Please describe.
We have a project where users build schemas composed of other schemas. We extend and limit JSON schema using custom meta-schemas to standardize certain things.
The relevant consequence of this is that it is possible to end up with oneOf and allOf fields that contain one item, which means an unnecessary dropdown containing one item.
For our purposes, it would be great to have an option to hide the dropdown if it only contains one option.
Describe the solution you'd like
A uiSchema option which, if true, would hide the select widget in MultiSchemaField if it contained only one option.
Describe alternatives you've considered
I appreciate that this is a non-standard use case that depends on both:
(a) allowing users to create schemas which are unknown ahead of time
(b) using fields such as oneOf even if the schema could be represented in normal JSON schema without them
I have considered patching or forking the library, or using a custom MultiSchemaField which implemented the behavior above. I suspect the last is likely the best option absent in-built support but welcome advice. All would be messier and require ongoing investment to keep up to date, so I thought I would see if there was any appetite for this feature first.
Note that this feature would need to be opt-in because the selection field may contain information that is not captured in the lone subschema in oneOf/anyOf/allOf.
@CiaranMn This sounds like it would be a useful feature! We would be open to reviewing a pull request that adds it.
Thanks @nickgros – I'm going to look at ways this might be achieved and then come back with any questions before opening a PR.
@nickgros

have a similar situation here.
{
"title": "Discipline Findings Guide",
"type": "object",
"required": [
"question1"
],
"properties": {
"question1": {
"title": "1. Select the citation associated with the incident of discipline (select all that apply)",
"type": "object",
"properties": {
"A": {
"title": "1302.90(c)(1)(ii)(A) - Use corporal punishment",
"type": "boolean"
},
"B": {
"title": "1302.90(c)(1)(ii)(B) - Use isolation to discipline a child",
"type": "boolean"
},
"C": {
"title": "1302.90(c)(1)(ii)(C) - Bind or tie a child to restrict movement or tape a child’s mouth",
"type": "boolean"
},
"question1Reason": {
"title": "Please describe the incident of discipline",
"type": "string"
},
"question1Citation": {
"type": "string",
"default": "1302.90(c)(1)(ii)"
}
},
"anyOf": [
{ "required": ["A"] },
{ "required": ["B"] },
{ "required": ["C"] }
]
}
}
}
is there any way to hide the dropdown completely? we are only using the anyOf to ensure that one of those boxes were checked. we were using this as a workaround in 2019 this structure, but since upgrading, we've noticed this dropdown is showing up (w/ the fieldset and legend) . we would just update the structure to use an array but we already have old data submissions that would be affected when rendering. anything we can add in the uiSchema to target the select dropdown and hide it?
is there any way to hide the dropdown completely? we are only using the anyOf to ensure that one of those boxes were checked. we were using this as a workaround in 2019 this structure, but since upgrading, we've noticed this dropdown is showing up (w/ the fieldset and legend) . we would just update the structure to use an array but we already have old data submissions that would be affected when rendering. anything we can add in the uiSchema to target the select dropdown and hide it?
You can use the uiSchema to mark the field as hidden via the hidden widget feature
You can use the
uiSchemato mark the field as hidden via the hidden widget feature
This is not clear enough, how could i use the "ui:widget": "hidden" to hide the select widget used by the anyOf?
Hey @igorbrasileiro this could be helpful https://github.com/rjsf-team/react-jsonschema-form/issues/3834#issuecomment-1699058963
is there any way to hide the dropdown completely? we are only using the anyOf to ensure that one of those boxes were checked. we were using this as a workaround in 2019 this structure, but since upgrading, we've noticed this dropdown is showing up (w/ the fieldset and legend) . we would just update the structure to use an array but we already have old data submissions that would be affected when rendering. anything we can add in the uiSchema to target the select dropdown and hide it?
You can use the
uiSchemato mark the field as hidden via the hidden widget feature
I'm running into this same issue. Could someone come up with an example of how to hide the dropdown completely? I'm including my playground example as an illustration. I really just need to hide the dropdown.
Folks, you may want to check out the workaround in #3834 where you can use "ui:fieldReplacesAnyOrOneOf": true and "ui:field": "hidden" to hide the anyOf or oneOf rendered content.