swagger-api / swagger-api/swagger-ui
DOM content is not loaded when onComplete callback fires
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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