react-jsonschema-form icon indicating copy to clipboard operation
react-jsonschema-form copied to clipboard

Option to hide dropdown for single-option oneOf / anyOf / allOf

Open CiaranMn opened this issue 2 years ago • 8 comments

Prerequisites

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.

CiaranMn avatar Feb 02 '23 09:02 CiaranMn

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.

nickgros avatar Feb 03 '23 16:02 nickgros

Thanks @nickgros – I'm going to look at ways this might be achieved and then come back with any questions before opening a PR.

CiaranMn avatar Feb 06 '23 20:02 CiaranMn

@nickgros image

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?

paypay43 avatar Feb 15 '23 22:02 paypay43

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

heath-freenome avatar Feb 24 '23 17:02 heath-freenome

You can use the uiSchema to 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?

igorbrasileiro avatar Jul 04 '23 20:07 igorbrasileiro

Hey @igorbrasileiro this could be helpful https://github.com/rjsf-team/react-jsonschema-form/issues/3834#issuecomment-1699058963

Spaider15 avatar Oct 06 '23 06:10 Spaider15

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

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.

cgokey avatar Jun 24 '24 15:06 cgokey

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.

nickgros avatar Jun 28 '24 20:06 nickgros