Optional array query string params not rendering properly

Q&A (please complete the following information)

• OS: macOS
• Browser: Chrome
• Version: 117.0.5938.92
• Method of installation: FastAPI
• Swagger-UI version: 5.6.2
• Swagger/OpenAPI version: OpenAPI 3.1.0

Content & configuration

Example Swagger/OpenAPI definition:

{
  "openapi": "3.1.0",
  "info": {
    "title": "FastAPI",
    "version": "0.1.0"
  },
  "paths": {
    "/api/download/multiple-materials": {
      "get": {
        "summary": "Download Multiple Materials",
        "operationId": "download_multiple_materials_api_download_multiple_materials_get",
        "security": [
          {
            "OAuth2PasswordBearer": []
          }
        ],
        "parameters": [
          {
            "name": "material_ids",
            "in": "query",
            "required": true,
            "schema": {
              "type": "array",
              "items": {
                "type": "integer"
              },
              "title": "Material Ids"
            }
          }
        ],
        "responses": {
          "200": {
            "description": "Successful Response",
            "content": {
              "application/json": {
                "schema": {

                }
              }
            }
          },
          "422": {
            "description": "Validation Error",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/HTTPValidationError"
                }
              }
            }
          }
        }
      }
    },
    "/api/details/materials": {
      "get": {
        "summary": "Get Materials Details",
        "operationId": "get_materials_details_api_details_materials_get",
        "parameters": [
          {
            "name": "countries",
            "in": "query",
            "required": false,
            "schema": {
              "anyOf": [
                {
                  "type": "array",
                  "items": {
                    "type": "integer"
                  }
                },
                {
                  "type": "null"
                }
              ],
              "title": "Countries"
            }
          },
          {
            "name": "source",
            "in": "query",
            "required": false,
            "schema": {
              "type": "array",
              "items": {
                "type": "integer"
              },
              "title": "Source"
            }
          },
          {
            "name": "page",
            "in": "query",
            "required": false,
            "schema": {
              "type": "integer",
              "minimum": 1,
              "description": "Page number",
              "default": 1,
              "title": "Page"
            },
            "description": "Page number"
          },
          {
            "name": "size",
            "in": "query",
            "required": false,
            "schema": {
              "type": "integer",
              "maximum": 100,
              "minimum": 1,
              "description": "Page size",
              "default": 50,
              "title": "Size"
            },
            "description": "Page size"
          }
        ],
        "responses": {
          "200": {
            "description": "Successful Response",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/Page_DetailedMaterial_"
                }
              }
            }
          },
          "422": {
            "description": "Validation Error",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/HTTPValidationError"
                }
              }
            }
          }
        }
      }
    }
  },
  "components": {
    "schemas": {
      "DetailedMaterial": {
        "properties": {
          "name": {
            "type": "string",
            "title": "Name"
          },
          "description": {
            "anyOf": [
              {
                "type": "string"
              },
              {
                "type": "null"
              }
            ],
            "title": "Description"
          },
          "id": {
            "type": "integer",
            "title": "Id"
          },
          "date_added": {
            "type": "string",
            "format": "date-time",
            "title": "Date Added"
          },
          "last_updated": {
            "type": "string",
            "format": "date-time",
            "title": "Last Updated"
          },
          "properties": {
            "title": "Properties"
          }
        },
        "type": "object",
        "required": [
          "name",
          "description",
          "id",
          "date_added",
          "last_updated",
          "properties"
        ],
        "title": "DetailedMaterial"
      },
      "HTTPValidationError": {
        "properties": {
          "detail": {
            "items": {
              "$ref": "#/components/schemas/ValidationError"
            },
            "type": "array",
            "title": "Detail"
          }
        },
        "type": "object",
        "title": "HTTPValidationError"
      },
      "Page_DetailedMaterial_": {
        "properties": {
          "items": {
            "items": {
              "$ref": "#/components/schemas/DetailedMaterial"
            },
            "type": "array",
            "title": "Items"
          },
          "total": {
            "type": "integer",
            "minimum": 0,
            "title": "Total"
          },
          "page": {
            "anyOf": [
              {
                "type": "integer",
                "minimum": 1
              },
              {
                "type": "null"
              }
            ],
            "title": "Page"
          },
          "size": {
            "anyOf": [
              {
                "type": "integer",
                "minimum": 1
              },
              {
                "type": "null"
              }
            ],
            "title": "Size"
          },
          "pages": {
            "anyOf": [
              {
                "type": "integer",
                "minimum": 0
              },
              {
                "type": "null"
              }
            ],
            "title": "Pages"
          }
        },
        "type": "object",
        "required": [
          "items",
          "total",
          "page",
          "size"
        ],
        "title": "Page[DetailedMaterial]"
      },
      "ValidationError": {
        "properties": {
          "loc": {
            "items": {
              "anyOf": [
                {
                  "type": "string"
                },
                {
                  "type": "integer"
                }
              ]
            },
            "type": "array",
            "title": "Location"
          },
          "msg": {
            "type": "string",
            "title": "Message"
          },
          "type": {
            "type": "string",
            "title": "Error Type"
          }
        },
        "type": "object",
        "required": [
          "loc",
          "msg",
          "type"
        ],
        "title": "ValidationError"
      }
    },
    "securitySchemes": {
      "OAuth2PasswordBearer": {
        "type": "oauth2",
        "flows": {
          "password": {
            "scopes": {

            },
            "tokenUrl": "token"
          }
        }
      }
    }
  }
}

Swagger-UI configuration options:

SwaggerUIBundle({
    url: '/openapi.json',
    "dom_id": "#swagger-ui",
    "layout": "BaseLayout",
    "deepLinking": true,
    "showExtensions": true,
    "showCommonExtensions": true,
    oauth2RedirectUrl: window.location.origin + '/docs/oauth2-redirect',
    presets: [
        SwaggerUIBundle.presets.apis,
        SwaggerUIBundle.SwaggerUIStandalonePreset
    ],
})

Describe the bug you're encountering

Query params that have array schemas that are marked required: false do not render properly in the UI. Params that are marked required: true render properly.

To reproduce...

Use the openapi.json specified above.

Screenshots

required: true - working properly

required: false with anyOf schema allowing array or null. Incorrectly displays a single text box

required: false with single array schema. Incorrectly displays no input field.

Start with the supplied OpenAPI 3.1.0 example and reproduce the rendering in Swagger UI 5.6.2 using the optional array query parameters. Trace the query-parameter rendering entry point, compare required and optional array schemas, and confirm done when both optional array forms display an appropriate array input while preserving the reported behavior for required arrays.