swagger-ui: docExpansion=full doesn't seem to work for multiple swagger-ui component instances

Q&A (please complete the following information)

OS: macOS
Browser: any (tested in chrome, firefox, safari)
Version: any
Method of installation: npm
Swagger-UI version: 3.43.0
Swagger/OpenAPI version: OpenAPI 3.0

Describe the bug you’re encountering

To reproduce…

Steps to reproduce the behavior:

Create a react app and install swagger-ui-react

npx create-react-app swagger-ui-bug
yarn add swagger-ui-react
yarn start

Edit src/App.js with the following content:

import SwaggerUI from "swagger-ui-react"
import "swagger-ui-react/swagger-ui.css"

function App() {
  return (
    <div className="App">
	<SwaggerUI url={"https://petstore.swagger.io/v2/swagger.json"} docExpansion={"full"} />
	<SwaggerUI url={"https://petstore.swagger.io/v2/swagger.yaml"} docExpansion={"full"} />
    </div>
  );
}

export default App;

See the result in the browser. Only one of the components expand the operations

Expected behavior

Both components should expand the operations

Screenshots

Additional context or thoughts

The behavior is consistently reproducible.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 7
Comments: 17 (14 by maintainers)

Commits related to this issue

fix: expand tags and operations predictably in multiple SwaggerUI instances (#9050) Refs #6996 Co-authored-by: Vladimír Gorej <vladimir.gorej@smartbear.com> — committed to swagger-api/swagger-ui by rhwilburn 10 months ago

Most upvoted comments

@mathis-m Thanks for the attention

I was able to circumvent the problem by adding a random delay before rendering the component:

  const [load, setLoad] = useState(false);
  useEffect(() => {
    setTimeout(() => setLoad(true), Math.random() * 1000);
  }, []);

  return load && (
      <SwaggerUI
        url={props.apiUrl}
        docExpansion={"full"}
      />
  );

This solves my problem for now. But I am still interested in other ideas you might have in the future.

Best,

thiagoalves on Mar 19, 2021