Redocly/redoc

Left navigation auto scrolling and link changing on scrolling is not working

Open

#1235 opened on Apr 20, 2020

View on GitHub
 (7 comments) (0 reactions) (0 assignees)TypeScript (21,877 stars) (2,272 forks)batch import
Type: Bughelp wanted

Description

Hi

We found a bug while integrating ReDoc into our application. While scrolling the left navigation bar is not scrolling or auto collapsed or even highlighted and even the link in the navigation bar is not changing. Please check the video

Our application is a SPA built using react and the redoc version we are using is 2.0.0-rc.26.

const APIRef = props => {
  return (
    <div id="redoc">
      <RedocStandalone
        spec={petStoreSpec}
        onLoaded={error => {
          if (error) {
            console.log(error);
          }
        }}
      />
    </div>
  );
};

The only warning we could see in the console is image

Contributor guide

Tech stack
typescriptreact
Domain
frontenddocumentation
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
React knowledgeScroll event handlingBasic Redoc understanding
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Investigate the left navigation scrolling and highlighting behavior in Redoc components, likely in the SideNav or Menu components. Check if the issue is related to React lifecycle (useEffect dependencies) when Redoc is used inside a SPA. Review the console warning about 'ResizeObserver loop limit exceeded' which may indicate performance issues. Look at the scroll event listeners and ensure they update the active link state correctly. Consider if the problem is caused by missing or incorrect scroll container references.