Inconsistent Rendering of Schemas in Swagger UI for OpenAPI 3.1 Specification

[whoareyoukid]

Q&A (please complete the following information)

• OS: Windows 11
• Browser: Chrome
• Version: 122
• Method of installation: npm
• Swagger-UI version: 5.12.0
• Swagger/OpenAPI version: OpenAPI 3.1

Content & configuration

Example Swagger/OpenAPI definition:

{
  "openapi": "3.1.0",
  "info": {
    "version": "1.0.0",
    "title": "Swagger Petstore",
    "license": {
      "name": "MIT",
      "url": "https://opensource.org/licenses/MIT"
    }
  },
  "servers": [
    {
      "url": "http://petstore.swagger.io/v1"
    }
  ],
  "paths": {
    "/pets": {
      "get": {
        "summary": "List all pets",
        "operationId": "listPets",
        "tags": [
          "pets"
        ],
        "parameters": [
          {
            "name": "limit",
            "in": "query",
            "description": "How many items to return at one time (max 100)",
            "required": false,
            "schema": {
              "type": "integer",
              "format": "int32"
            }
          }
        ],
        "responses": {
          "200": {
            "description": "A paged array of pets",
            "headers": {
              "x-next": {
                "description": "A link to the next page of responses",
                "schema": {
                  "type": "string"
                }
              }
            },
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/Pets"
                }
              }
            }
          },
          "default": {
            "description": "unexpected error",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/Error"
                }
              }
            }
          }
        }
      },
      "post": {
        "summary": "Create a pet",
        "operationId": "createPets",
        "tags": [
          "pets"
        ],
        "responses": {
          "201": {
            "description": "Null response"
          },
          "default": {
            "description": "unexpected error",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/Error"
                }
              }
            }
          }
        }
      }
    },
    "/pets/{petId}": {
      "get": {
        "summary": "Info for a specific pet",
        "operationId": "showPetById",
        "tags": [
          "pets"
        ],
        "parameters": [
          {
            "name": "petId",
            "in": "path",
            "required": true,
            "description": "The id of the pet to retrieve",
            "schema": {
              "type": "string"
            }
          }
        ],
        "responses": {
          "200": {
            "description": "Expected response to a valid request",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/Pet"
                }
              }
            }
          },
          "default": {
            "description": "unexpected error",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/Error"
                }
              }
            }
          }
        }
      }
    }
  },
  "components": {
    "schemas": {
      "Pet": {
        "type": "object",
        "required": [
          "id",
          "name"
        ],
        "properties": {
          "id": {
            "type": "integer",
            "format": "int64"
          },
          "name": {
            "type": "string"
          },
          "tag": {
            "type": "string"
          }
        }
      },
      "Pets": {
        "type": "array",
        "items": {
          "$ref": "#/components/schemas/Pet"
        }
      },
      "Error": {
        "type": "object",
        "required": [
          "code",
          "message"
        ],
        "properties": {
          "code": {
            "type": "integer",
            "format": "int32"
          },
          "message": {
            "type": "string"
          }
        }
      }
    }
  }
}

Swagger-UI configuration options:

1. In API references tab

SwaggerUI({
        spec: apiSpec,
        defaultModelsExpandDepth: -1,
        dom_id: '#container',
        defaultModelRendering: 'model',
        showExtensions: true,
        deepLinking: true
})

2. In Schema view tab

SwaggerUI({
      spec: apiSpec,
      dom_id: '#schema-ui-container',
      showExtensions: true,
      defaultModelRendering: 'model',
});

Describe the bug you're encountering

We have 2 tabs in our Angular application- API references and Schema view. In the API references tab, we do not want to show the schema at the bottom, while in the Schema view tab, we want to show the schema only.

The visibility of schema depends on the order of clicking the tabs.

• On navigating to API references tab first, the output is expected. Schema is not displayed below. However, if I click on the Schema view tab next, the schemas are not displayed, despite the different configurations as mentioned above.
• On navigating to Schema view tab first, the schemas are displayed as expected. However, clicking on API references tab next, the schemas are displayed at the bottom.

On refreshing, everything disappears.

Expected behavior

• API Reference tab should not render schemas.
• Schema view tab should render only schemas.
• Refreshing should not make everything disappear.

Additional context or thoughts

This issue exists only for OAS 3.1; Swagger 2.0 and OAS 3.0 render as expected. This implies that our application logic is not particularly at fault here.