rjsf-team / react-jsonschema-form

A React component for building Web forms from JSON Schema.
https://rjsf-team.github.io/react-jsonschema-form/
Apache License 2.0
14.38k stars 2.19k forks source link

Bug with array properties inside allOf #4090

Open dj-fiorex opened 9 months ago

dj-fiorex commented 9 months ago

Prerequisites

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?

Playground Link

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'],
  },
}
heath-freenome commented 9 months ago

@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