redoc Redoc sidemenu doesn't auto-activate for certain styled outer container

Describe the bug

If we put the ReDoc in an outer container with the following css style, the sidemenu doesn't automatically activate/expand anymore when scrolling:

<div style="position: absolute; top: 100px;left: 0; right: 0; bottom: 0; overflow-y: auto;"> 
    <div id="redoc-container" ></div>
</div>

Also, the URL history stopped updating when scrolling.

It stops working when the overflow-y: auto/scroll; and position: absolute show up in the outer container at the same time.

Expected behavior

The side menu should automatically activate/expand and history should be auto-updated when scrolling, even if the outer container is absolute and scroll overflow.

Screenshots

May 09 '22 17:05 limbov8

After we migrate to bootstrap 5, the situation gets weird.

As the following example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">
</head>
<body>
  <div class="position-absolute overflow-visible" style="top:0;bottom:0;left:0;right:0">
    <div id="redoc-container" ></div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

  <script src="https://cdn.jsdelivr.net/npm/redoc@latest/bundles/redoc.standalone.js"></script>
  <script type="text/javascript">
    Redoc.init(
      './v0.json', 
      {},
      document.getElementById('redoc-container'));
  </script>
</body>
</html>

These 2 features could not work at the same time:

With overflow-visible(overflow-y: visible)
- when scrolling down, the menu items won't auto-expand (works)
- when clicking on the menu, the page auto-scroll to the view (doesn't work)
Without overflow-visible(overflow-y: auto/scroll)
- when scrolling down, the menu items won't auto-expand (doesn't work)
- when clicking on the menu, the page auto-scroll to the view (works)

May 13 '22 21:05 limbov8

After we migrate to bootstrap 5, the situation gets weird.

As the following example:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">
</head>
<body>
  <div class="position-absolute overflow-visible" style="top:0;bottom:0;left:0;right:0">
    <div id="redoc-container" ></div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

  <script src="https://cdn.jsdelivr.net/npm/redoc@latest/bundles/redoc.standalone.js"></script>
  <script type="text/javascript">
    Redoc.init(
      './v0.json', 
      {},
      document.getElementById('redoc-container'));
  </script>
</body>
</html>
These 2 features could not work at the same time:

With overflow-visible(overflow-y: visible)

when scrolling down, the menu items won't auto-expand (works)

when clicking on the menu, the page auto-scroll to the view (doesn't work)

Without overflow-visible(overflow-y: auto/scroll)

when scrolling down, the menu items won't auto-expand (doesn't work)

when clicking on the menu, the page auto-scroll to the view (works)

I developed a logic with 1. this fixes the scroll on click issue.

const [runObserver, setRunObserver] = useState(null);
  const [connetEvent, setConnectEvent] = useState(false);

  useEffect(() => {
    setRunObserver(setInterval(menuObserver, 1000));
  }, []);

  const menuObserver = () => {
    if (Array.from(document.querySelectorAll("[data-item-id]")).length !== 0) {
      clearInterval(runObserver);
      setConnectEvent(true);
    }
  };

  useEffect(() => {
    if (connetEvent) {
      if (
        Array.from(document.querySelectorAll("[data-item-id]")).length !== 0
      ) {
        document.querySelectorAll("[data-item-id]").forEach((node) => {
          node.addEventListener("click", clickEvent);
        });
      } else {
        setRunObserver(setInterval(menuObserver, 1000));
        setConnectEvent(false);
      }
    }

    return () => {
      if (
        Array.from(document.querySelectorAll("[data-item-id]")).length !== 0
      ) {
        document.querySelectorAll("[data-item-id]").forEach((node) => {
          node.removeEventListener("click", clickEvent);
        });
      }
    };
  }, [connetEvent]);

  const clickEvent = (event) => {
    // console.log(event.currentTarget.getAttribute("data-item-id"));
    scrollIntoScreen(event.currentTarget.getAttribute("data-item-id"));
    event.stopPropagation();
  };

  const scrollIntoScreen = (id) => {
    var element = document.getElementById(id);
    var headerOffset = 20;
    var elementPosition = element.getBoundingClientRect().top;
    var offsetPosition = elementPosition + window.pageYOffset - headerOffset;
    window.scrollTo({
      top: offsetPosition,
      behavior: "smooth",
      block: "start",
      inline: "nearest",
    });
  };

Just a workaround.

Oct 07 '22 08:10 vikassaini-it