react-jsonschema-form
react-jsonschema-form copied to clipboard
rjsf-team
Bug with array properties inside allOf
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.17.0
Current Behavior
Hello guys, i tried to share a playground but the url is not updating and i don't understand how to do it, but if you try to put this schema inside the playground and hit the plus button and again the plus button, you will see that "hashtags": [] and "related": [] arrays are created in formData even if the default selected option is "facebook" that doesn't have that properties. i don't know if this is a bug or maybe i misunderstood how to do things
If i try to change "hashtags" type to "number" for example it will not be included in formData Thanks guys
Expected Behavior
Expected Behavior is doesn't have formData prepopulated with values that doesn't belong to the selected if clause of allOf
Steps To Reproduce
Node 18 Latest version Core theme Also playground
Environment
- OS: osx, windows, playground
- Node: 18, 20
- npm:
Anything else?
This is my json schema
{
title: 'Share on social Config',
type: 'array',
items: {
type: 'object',
title: 'Row',
properties: {
fields: {
type: 'array',
title: 'Fields',
items: {
type: 'object',
properties: {
columnSpan: {
type: 'number',
title:
'Column Span (is a number, will be used with grid-template-rows)',
},
type: {
type: 'string',
title: 'Field Type',
oneOf: [
{
const: 'facebook',
title: 'Facebook',
},
{
const: 'linkedin',
title: 'Linkedin',
},
{
const: 'pinterest',
title: 'Pinterest',
},
{
const: 'reddit',
title: 'Reddit',
},
{
const: 'telegram',
title: 'Telegram',
},
{
const: 'twitter',
title: 'X-Twitter',
},
{
const: 'whatsapp',
title: 'Whatsapp',
},
{
const: 'spacer',
title: 'Spacer',
},
{
const: 'other',
title: 'Other',
},
],
default: 'facebook',
},
},
allOf: [
{
if: {
properties: {
type: {
anyOf: [
{
const: 'facebook',
},
{
const: 'linkedin',
},
{
const: 'pinterest',
},
{
const: 'reddit',
},
{
const: 'telegram',
},
{
const: 'twitter',
},
{
const: 'whatsapp',
},
{
const: 'other',
},
],
},
},
},
then: {
properties: {
enabled: {
type: 'boolean',
title: 'Enabled',
default: false,
},
label: {
type: 'string',
title: 'Label',
},
windowWidth: {
type: 'number',
title: 'Window Width',
},
windowHeight: {
type: 'number',
title: 'Window Height',
},
},
required: ['windowWidth', 'windowHeight', 'enabled'],
},
},
{
if: {
properties: {
type: {
const: 'facebook',
},
},
},
then: {
properties: {
hashtag: {
type: 'string',
title: 'Hashtag',
},
},
},
},
{
if: {
properties: {
type: {
const: 'other',
},
},
},
then: {
properties: {
url: {
type: 'string',
title: 'Social shareable URL',
},
imageUrl: {
type: 'string',
title: 'Social Image URL',
},
imageBackgroundColor: {
type: 'string',
title: 'Image Background Color',
},
},
},
},
{
if: {
properties: {
type: {
const: 'twitter',
},
},
},
then: {
properties: {
hashtags: {
type: 'number',
title: 'Hashtags',
// items: {
// type: 'string',
// },
},
related: {
type: 'array',
title: 'Related',
items: {
type: 'string',
},
},
},
},
},
],
required: ['columnSpan', 'type'],
},
},
},
required: ['fields'],
},
}
@dj-fiorex What you want to do is set the experimental_defaultFormStateBehavior on the Form, to set emptyobjectfields to populateRequiredDefaults . See this documentation.
Here is the updated playground with the changed field
