swagger-api / swagger-api/swagger-ui

DOM content is not loaded when onComplete callback fires

Open
#10,662 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
29k
Forks
9.3k
Avg merge
2d 23h
Merged PRs (30d)
25

Description

Q&A (please complete the following information)
  • OS: Windows 11
  • Browser: Microsoft Edge
  • Version: 143.0.3650.66
  • Method of installation: dist assets (plain JS/CSS)
  • Swagger-UI version: 5.11.0
  • Swagger/OpenAPI version: Swagger 2.0
Content & configuration

Example Swagger/OpenAPI definition:
Can be anything

Swagger-UI configuration options:

SwaggerUIBundle({
  spec: <swagger-def-json>,
  dom_id: '#swagger-ui',
  deepLinking: true,
  plugins: [
   SwaggerUIBundle.plugins.DownloadUrl,
  ],
  onComplete: () => {
    const titleElement = document.querySelector('.title');
    console.log(titleElement);
  }
})
Describe the bug you're encountering

When the onComplete callback fires, the DOM content of SwaggerUI is possibly not completely rendered, since querying for known elements returns nothing. This was working fine till v5.10.5.
My implementation adds a couple of buttons on the right end of the title, for copying and downloading the Swagger JSON itself, and these buttons are added to the DOM in the onComplete handler.

To reproduce...

Steps to reproduce the behavior:
As mentioned in the configuration section above, add an onComplete handler which makes a CSS selector query on known elements within SwaggerUI. It will return nothing.

Expected behavior

onComplete signified that the rendering is complete, so querying on elements withing SwaggerUI should work.

Screenshots
Additional context or thoughts

Only thing I could correlate it to was the fact that React 18 support was added with v5.11.0, not sure if that impacted using plain JS/CSS assets.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start from the SwaggerUIBundle configuration and its onComplete callback, then compare the callback behavior between versions 5.10.5 and 5.11.0, especially after React 18 support was added. Reproduce the issue in Microsoft Edge using the provided selector query; done means Swagger UI elements are available when onComplete fires.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.