Hide/Show in UISchema Breaks on Screen size

I am running into an issue, in which I have hide/show logic in UI Schema, however based on the actual screensize, when the rule is set to Hide, the items still show. Here’s an example of the fields not actually showing (this is correct):

However, when I shrink the screen size, the items are no longer hidden.
image

Here are the corresponding schema and uischema files:

Schema:

{
    "type": "object",
    "properties": {
        "example": {
            "type": "object",
            "required": ["multiselect_parent"],
            "properties": {
                "multiselect_parent": {
                    "type": "string",
                    "oneOf": [{
                            "title": "None",
                            "const": "NONE"
                        }, {
                            "title": "Example 1",
                            "const": "EXAMPLE_1"
                        }, {
                            "title": "Example 2",
                            "const": "EXAMPLE_2"
                        }, {
                            "title": "Example 3",
                            "const": "EXAMPLE_3"
                        }
                    ],
                    "title": "Choose which Multiselect"
                }
            },
            "allOf": [
                {
                    "if": {
                        "not" : {
                        "properties": {
                            "multiselect_parent": {
                                "enum": ["NONE"]
                            }
                        }
                        }
                    },
                    "then": {
                        "properties": {
                            "multiselect_example": {
                                "title": "Mutliselect Example Title",
                                "description": "Mutliselect Example Description",
                                "type": "array",
                                "uniqueItems": true,
                                "items": {
                                    "type": "string",
                                    "oneOf": [{
                                            "title": "Option 10",
                                            "const": "OPTION_10"
                                        }, {
                                            "title": "Option 20",
                                            "const": "OPTION_20"
                                        }, {
                                            "title": "Option 30",
                                            "const": "OPTION_30"
                                        }, {
                                            "title": "Option 40",
                                            "const": "OPTION_40"
                                        }, {
                                            "title": "Option 50",
                                            "const": "OPTION_50"
                                        }, {
                                            "title": "Option 60",
                                            "const": "OPTION_60"
                                        }, {
                                            "title": "Option 70",
                                            "const": "OPTION_70"
                                        }, {
                                            "title": "Option 80",
                                            "const": "OPTION_80"
                                        }, {
                                            "title": "Option 90",
                                            "const": "OPTION_90"
                                        }
                                    ]
                                }
                            }
                        },
                        "required": ["multiselect_example"]
                    }
                }                
            ]
        }
    }
}

UISchema:

{
  "type": "Group",
  "elements": [
    {
      "type": "VerticalLayout",
      "elements": [
        {
          "type": "VerticalLayout",
          "elements": [
            {
              "type": "Group",
              "elements": [
                {
                  "type": "Control",
                  "scope": "#/properties/example/properties/multiselect_parent"
                }
              ]
            },
            {
              "type": "VerticalLayout",
              "elements": [
                {
                  "type": "Control",
                  "scope": "#/properties/example/properties/multiselect_example",
                  "options": {
                    "detail": {
                      "type": "VerticalLayout",
                      "elements": [
                        {
                          "type": "Control",
                          "scope": "#"
                        }
                      ]
                    }
                  },
                  "rule": {
                    "effect": "HIDE",
                    "condition": {
                      "scope": "#/properties/example/properties/multiselect_parent",
                      "schema": {
                        "enum": [
                          "NONE"
                        ]
                      }
                    }
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

Am I doing something wrong or is this a bug?

Hi @hellsfantasy,

This is a bug in our multi enum renderer. It should use xsUp instead of xlUp.

I opened PR #2252 for this. Thanks for the report!