Does not scroll to item on menu bar click

[graham-atom]

Describe the bug When I use the redoc standalone react component embedded in my SPA react app, the side menu functionality does not work. When I click on the section I want to go to, the URL is updated correctly but the UI does not jump to the right spot. When I manually refresh with the updated URL it goes to the correct location in the docs.

Expected behavior When I click on an item in the side menu, I expect it to be navigated to in the UI

[bhtabor]

Perhaps this is related to https://github.com/Redocly/redoc/issues/2272

[graham-atom]

I do not have bootstrap installed on the project I am working on, maybe some dependency is causing an issue

[graham-atom]

any suggestions on how I could go about resolving this @bhtabor?

[AlexVarchuk]

Hi @graham-atom, thank you for the issue. Please provide more details to be able to investigate it.

[graham-atom]

this is what my package Json looks like:

"dependencies": {
    "@aws-amplify/ui-react": "^3.5.11",
    "@datadog/browser-rum": "^4.30.1",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/icons-material": "^5.11.0",
    "@mui/lab": "^5.0.0-alpha.129",
    "@mui/material": "^5.11.10",
    "@mui/x-data-grid": "^5.17.18",
    "@tanstack/react-query": "^4.35.7",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@types/react-router-dom": "^5.3.3",
    "aws-amplify": "^4.3.43",
    "core-js": "^3.33.0",
    "css-loader": "^6.7.2",
    "date-fns": "^2.30.0",
    "jwt-decode": "^3.1.2",
    "material-react-table": "^1.15.0",
    "mobx": "^6.10.2",
    "p-debounce": "^4.0.0",
    "password-validator": "^5.3.0",
    "react": "18.2.0",
    "react-router-dom": "6.7.0",
    "react-router-hash-link": "^2.4.3",
    "react-scripts": "5.0.1",
    "redoc": "^2.1.2",
    "sass": "^1.56.2",
    "sass-loader": "^13.2.0",
    "scss-loader": "^0.0.1",
    "styled-components": "^6.0.8",
    "swagger-ui-react": "^5.1.3",
    "typescript": "4.9.4",
    "usehooks-ts": "^2.9.1",
    "web-vitals": "^2.1.4"
  },
  "devDependencies": {
    "@trivago/prettier-plugin-sort-imports": "^4.0.0",
    "@types/jest": "^29.5.3",
    "@types/js-yaml": "^4.0.5",
    "@types/react-router-hash-link": "^2.4.5",
    "@types/swagger-ui-react": "^4.18.0",
    "@typescript-eslint/eslint-plugin": "^5.59.2",
    "@typescript-eslint/parser": "^5.59.2",
    "cypress": "12.17.4",
    "esbuild": "0.18.15",
    "eslint": "^8.26.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-prettier": "^4.2.1",
    "express": "^4.18.2",
    "js-yaml": "^4.1.0",
    "prettier": "2.8.1",
    "rome": "12.1.3",
    "tsx": "^3.12.2"
  },

and I am rendering the react component like so:

<Box>
      <RedocStandalone spec={openApiSpec} />
    </Box>

My application uses the <BrowserRouter> from react-router-dom.

Let me know if there is more information you need