FallbackField feature proposal for schemas with no type #4736
Description
Prerequisites
- I have read the documentation
What theme are you using?
core
Is your feature request related to a problem? Please describe.
In our application, we have (user-created) schemas that look something like this:
{
"properties": {
"foo": {
"title": "Foo",
"description": "TBD"
}
},
"required": ["foo"]
}You may notice that foo does not have a type! Apparently, this is valid JSON Schema. When you plug this into RJSF today, we render the UnsupportedField template, which is basically an error message.
Describe the solution you'd like
I was thinking of implementing a new (opt-in) "FallbackField", that can be rendered if the schema has no type (or an unknown type). Similar to the MultiSchemaField, the FallbackField will create two components:
- A
SelectWidgetthat can be used to pick one of["string", "number", "boolean"] - A
SchemaFieldfor the value, which uses the correct widget based on the chosen type.
Each theme would implement a FallbackFieldTemplate, which will basically lay out the components like this:
Foo
Type Value
+-------------------+ +--------------------------+
| string v | | your text here |
+-------------------- +--------------------------+
A user could change "string" to "boolean" to see a checkbox and interact with it. (Note: If form data is present, I think it makes the most sense to just clear the form data when the user changes the type)
Foo
Type Value
+-------------------+ +--+
| boolean v | |✅|
+-------------------- +--+
I was thinking of making this opt-in because I think most RJSF users should define a type in for each of their schema properties, so the default behavior to show the UnsupportedField won't change.
In @rjsf/core, we can expose the default _FallbackField in the registry. To use it, one would just have to provide it (or a custom implementation) to the FallbackField property:
import Form, { getDefaultRegistry } from '@rjsf/core'
import validator from '@rjsf/validator-ajv8';
const schema: RJSFSchema = {
title: 'My form',
description: 'My description',
// No type!
};
render(
<Form
schema={schema}
validator={validator}
fields={{ FallbackField: getDefaultRegistry().fields._FallbackField }}
/>,
document.getElementById('app')
);