Unable to switch between the options in the anyOf when omitExtraData and liveOmit is true

[binhtran04]

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• 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.x

Current Behavior

I have a schema that has anyOf between two options. The form renders a selector for it, but when I use the selector to select the options, it does not work. I also notice when I select the option 2 for example, the formData is filled with default of both option 1 and option 2.

When turning off omitExtraData and liveOmit, it works normally.

Expected Behavior

When I switch to option 2, the fields for option 2 should be rendered, and the formData contains only the default values for option 2

Steps To Reproduce

Visit playground, and try to use the selector to select option 2. You will notice the fields for option 1 still render and the formData includes the default values for both option 1 and option 2

Environment

Playground: https://rjsf-team.github.io/react-jsonschema-form/#eyJmb3JtRGF0YSI6eyJteVByb3BlcnR5Ijp7InZhbHVlX3Byb3ZpZGVyX3R5cGUiOiJUWVBFXzEiLCJzdGFydCI6NjUwMDAwMDAwMCwic3RvcCI6ODUwMDAwMDAwMCwic3RlcF9zaXplIjoxMDAwMDAsIm51bV9zYW1wbGVzIjoyMDAxLCJzd2VlcF9zaGlmdCI6MH19LCJzY2hlbWEiOnsidGl0bGUiOiJTZXR0aW5ncyIsInR5cGUiOiJvYmplY3QiLCJwcm9wZXJ0aWVzIjp7Im15UHJvcGVydHkiOnsiZGVmYXVsdCI6eyJ2YWx1ZV9wcm92aWRlcl90eXBlIjoiVFlQRV8xIiwic3RhcnQiOjY1MDAwMDAwMDAsInN0b3AiOjg1MDAwMDAwMDAsInN0ZXBfc2l6ZSI6MTAwMDAwLCJudW1fc2FtcGxlcyI6MjAwMX0sImFueU9mIjpbeyIkcmVmIjoiIy9kZWZpbml0aW9ucy9UeXBlMiJ9LHsiJHJlZiI6IiMvZGVmaW5pdGlvbnMvVHlwZTEifV19fSwiZGVmaW5pdGlvbnMiOnsiVHlwZTIiOnsidGl0bGUiOiJUeXBlMiIsInR5cGUiOiJvYmplY3QiLCJwcm9wZXJ0aWVzIjp7InN3ZWVwX3JhbmdlIjp7InRpdGxlIjoiU3dlZXAgcmFuZ2UiLCJ0eXBlIjoibnVtYmVyIn0sInN3ZWVwX3N0ZXBfc2l6ZSI6eyJ0aXRsZSI6IlN0ZXAgc2l6ZSIsInR5cGUiOiJudW1iZXIifSwic3dlZXBfc2hpZnQiOnsidGl0bGUiOiJTaGlmdCIsImRlZmF1bHQiOjAsInR5cGUiOiJudW1iZXIifX0sInJlcXVpcmVkIjpbInN3ZWVwX3JhbmdlIiwic3dlZXBfc3RlcF9zaXplIl19LCJUeXBlMSI6eyJ0aXRsZSI6IlR5cGUxIiwidHlwZSI6Im9iamVjdCIsInByb3BlcnRpZXMiOnsic3RhcnQiOnsidGl0bGUiOiJTdGFydCIsInR5cGUiOiJudW1iZXIifSwic3RvcCI6eyJ0aXRsZSI6IlN0b3AiLCJ0eXBlIjoibnVtYmVyIn0sInN0ZXBfc2l6ZSI6eyJ0aXRsZSI6IlN0ZXAgc2l6ZSIsInR5cGUiOiJudW1iZXIifSwibnVtX3NhbXBsZXMiOnsidGl0bGUiOiJOdW1iZXIgb2Ygc2FtcGxlcyIsInR5cGUiOiJpbnRlZ2VyIn0sInZhbHVlX3Byb3ZpZGVyX3R5cGUiOnsidGl0bGUiOiJWYWx1ZSBQcm92aWRlciBUeXBlIiwiZGVmYXVsdCI6IlRZUEVfMSIsImVudW0iOlsiVFlQRV8xIl0sInR5cGUiOiJzdHJpbmcifX0sInJlcXVpcmVkIjpbInN0YXJ0Iiwic3RvcCIsInZhbHVlX3Byb3ZpZGVyX3R5cGUiXX19fSwidWlTY2hlbWEiOnt9LCJ0aGVtZSI6ImRlZmF1bHQiLCJsaXZlU2V0dGluZ3MiOnsic2hvd0Vycm9yTGlzdCI6InRvcCIsInZhbGlkYXRlIjpmYWxzZSwiZGlzYWJsZWQiOmZhbHNlLCJub0h0bWw1VmFsaWRhdGUiOmZhbHNlLCJyZWFkb25seSI6ZmFsc2UsIm9taXRFeHRyYURhdGEiOnRydWUsImxpdmVPbWl0Ijp0cnVlLCJleHBlcmltZW50YWxfZGVmYXVsdEZvcm1TdGF0ZUJlaGF2aW9yIjp7ImFycmF5TWluSXRlbXMiOiJwb3B1bGF0ZSIsImFsbE9mIjoic2tpcERlZmF1bHRzIiwiZW1wdHlPYmplY3RGaWVsZHMiOiJwb3B1bGF0ZUFsbERlZmF1bHRzIiwibWVyZ2VEZWZhdWx0c0ludG9Gb3JtRGF0YSI6InVzZUZvcm1EYXRhSWZQcmVzZW50In0sImxpdmVWYWxpZGF0ZSI6ZmFsc2UsIm5vVmFsaWRhdGUiOmZhbHNlfX0=

Anything else?

The schema I'm testing with

{
  "title": "Settings",
  "type": "object",
  "properties": {
    "myProperty": {
      "default": {
        "value_provider_type": "TYPE_1",
        "start": 6500000000,
        "stop": 8500000000,
        "step_size": 100000,
        "num_samples": 2001
      },
      "anyOf": [
        {
          "$ref": "#/definitions/Type2"
        },
        {
          "$ref": "#/definitions/Type1"
        }
      ]
    }
  },
  "definitions": {
    "Type2": {
      "title": "Type2",
      "type": "object",
      "properties": {
        "sweep_range": {
          "title": "Sweep range",
          "type": "number"
        },
        "sweep_step_size": {
          "title": "Step size",
          "type": "number"
        },
        "sweep_shift": {
          "title": "Shift",
          "default": 0,
          "type": "number"
        }
      },
      "required": [
        "sweep_range",
        "sweep_step_size"
      ]
    },
    "Type1": {
      "title": "Type1",
      "type": "object",
      "properties": {
        "start": {
          "title": "Start",
          "type": "number"
        },
        "stop": {
          "title": "Stop",
          "type": "number"
        },
        "step_size": {
          "title": "Step size",
          "type": "number"
        },
        "num_samples": {
          "title": "Number of samples",
          "type": "integer",
          "default": -1
        },
        "value_provider_type": {
          "title": "Value Provider Type",
          "default": "TYPE_1",
          "enum": [
            "TYPE_1"
          ],
          "type": "string"
        }
      },
      "required": [
        "start",
        "stop",
        "value_provider_type"
      ]
    }
  }
}

[binhtran04]

I dug a bit, and it looks like the bug happens like this. Given the schema has a top-level default, which is the value of option 1. Some fields from option 1 and option 2 have default values as well.
When I select option 2:

1. First onChange happens with the id of the anyOf_select and formData contains the default values for option 2
2. Then the second change happens without any id and the formData contains the defaults of the top-level defaults and the option 2 defaults. I believe this is because of some internal initialization

Now the formData is mixed between option 1 and option 2 values, and the form thinks option 1 is still selected, hence the bug

I think the expected behaviour should be that either the second onChange does not happen, or it happens in a way that includes only the defaults for the second option.

[quentin-sommer]

👋 I can see the same issue without any default values

{
  "additionalProperties": false,
  "properties": {
    "any_of_array_or_null": {
      "anyOf": [
        {
          "items": {
            "type": "integer"
          },
          "type": "array",
          "title": "Array value selected"
        },
        {
          "type": "null",
          "title": "Null value selected"
        }
      ]
    }
  },
  "required": [
    "any_of_array_or_null"
  ],
  "type": "object"
}

Screen.Recording.2024-11-07.at.17.01.43.mov

My guess is that it's a conflict between a default null value inside the lib and the fact that null is an allowed value

[quentin-sommer]

I made an attempt at fixing this here #4375