Field is present in DOM even after setting {visible:false}.

[Nilesh9768]

Hi,
In the schema given below, I have one selectField, using the value of this field, Field-1 and Field-2 are conditionally rendered. But these fields are still present in the DOM. I want only Field-1 to be present in the DOM when option A is selected, and the same should happen with Field-2 when B is selected.

Is there a way to achieve it using Conditional Schema?
Thank you!

  fields: [
    {
      component: select,
      name: "select-1",
      label:"Select-1",
      options:[
      { label: "A",value:"A"},
      { label: "B",value:"B"},
    },
    {
      component: componentTypes.TEXT_FIELD,
      name: "field-1",
      label:"Field-1",
       condition: {
        when: "select",
        is: "A",
        then: {visible:true},
        else: { visible: false }
      },
    },
    {
      component: componentTypes.TEXT_FIELD,
      name: "field-2",
      label: "Custom validator",
      condition: {
        when: "select",
        is: B,
        then: {visible:true},
        else: { visible: false }
      },
    }
  ]
}```

[rvsia]

@Nilesh9768 visible true is set by default in condition, so you do not have to specify it. However, you have wrong name in when attribute. Your select is called select-1.

[Nilesh9768]

@rvsia Thanks a lot for the quick response! It is just a dummy example that is similar to my use case. This typo is here in this code only. Things are working as expected.

Here is what I want to achieve:
When select-1 is A, Field-2 is not visible in UI, which works fine. However, It is still present in the DOM(It takes its defined space, only it's not visible). Field-2 shouldn't be present in the DOM.

[rvsia]

I used your schema here: https://h7ddvt.stackblitz.io

I do not see the issue you describe. The DOM is being properly cleaned when one component is being mounted/unmnounted.