Scrolling doesnt work correctly in Sidebar

[BennyAlex]

Hi,
I want to highlight elements in a Mui-Drawer.

It scrolls the drawer very wirdly, all hightlight are on the wrong item.
Is this fixable or does joyride only work on the body?

Thansk for any help!

[gilbarbara]

Hey @BennyAlex

I couldn't load the codesandbox. Is it public?

[BennyAlex]

@gilbarbara
Sorry, try this please:

https://codesandbox.io/p/sandbox/joyride-navbar-bug-xphckr?file=%2Fdemo.tsx%3A0-6263&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clyiv6gvo0007356ga9gamnn7%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clyiv6gvo0003356g1kp75ln2%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clyiv6gvo0004356gm53p0nxe%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clyiv6gvo0006356g5e45az81%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B41.14662817420133%252C58.85337182579867%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clyiv6gvo0003356g1kp75ln2%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clyiv6gvo0002356g2rqerktd%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A0%252C%2522endLineNumber%2522%253A6263%257D%255D%252C%2522filepath%2522%253A%2522%252Fdemo.tsx%2522%257D%255D%252C%2522id%2522%253A%2522clyiv6gvo0003356g1kp75ln2%2522%252C%2522activeTabId%2522%253A%2522clyiv6gvo0002356g2rqerktd%2522%257D%252C%2522clyiv6gvo0006356g5e45az81%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clyiv6gvo0005356g6mpkzj6o%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clyiv6gvo0006356g5e45az81%2522%252C%2522activeTabId%2522%253A%2522clyiv6gvo0005356g6mpkzj6o%2522%257D%252C%2522clyiv6gvo0004356gm53p0nxe%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clyiv6gvo0004356gm53p0nxe%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

[gilbarbara]

Hey @BennyAlex

So, to start, the body is shorter than the sidebar, which is weird. Set a min-height: 100vh to fix that.
But even the minHeight, the sidebar scrolls too when the Joyride is scrolling, which causes the spotlight to be rendered in the wrong position.
I could fix it by dispatching a resize event when all the scrolling ends. I'm not sure if there's a better option, but it works.

Add this function somewhere in your code:

function waitForScrollEnd() {
  let lastChangedFrame = 0;
  let lastX = window.scrollX;
  let lastY = window.scrollY;

  return new Promise<void>((resolve) => {
    function tick(frames: number) {
      if (frames >= 500 || frames - lastChangedFrame > 20) {
        resolve();
      } else {
        if (window.scrollX != lastX || window.scrollY != lastY) {
          lastChangedFrame = frames;
          lastX = window.scrollX;
          lastY = window.scrollY;
        }
        requestAnimationFrame(tick.bind(null, frames + 1));
      }
    }
    tick(0);
  });
}

And inside the callback:

if (data.action === ACTIONS.UPDATE && data.lifecycle === LIFECYCLE.TOOLTIP) {
  waitForScrollEnd().then(() => {
    window.dispatchEvent(new Event("resize"));
  });
}

[gilbarbara]

No, it works with elements with custom scroll, too. However, MUI has made some weird layout choices.
For example, the .MuiDrawer-root has no height, and its direct child has a padding top instead of a margin top. So that adds up to being unconventional.

[BennyAlex]

Ah thanks. I tried to set a height and remove the padding but then it stills instantly scrolls to the bottom and the hightlight are still missplaced. Any idea how to make it work without js?

[BennyAlex]

@gilbarbara
I tried your fix but it is still offset:
https://codesandbox.io/p/sandbox/joyride-navbar-bug-xphckr?file=%2Fdemo.tsx%3A0-6263

[gilbarbara]

Move the overflow: "auto" to the .MuiDrawer-paper properties to work with the fix

[BennyAlex]

thanks, this kinda works, but if you click back and forth it will look like this

very wired

[gilbarbara]

It's working for me.

joyride-mui.mp4

[BennyAlex]

Can you try again please? Depending on the screen size and by "random" it works better or worse:

Also click back and forth multiple times ;D

[BennyAlex]

Also removing disableScrollParentFix doesnt work:

[gilbarbara]

Hey @BennyAlex
Try setting a setTimeout on the resize event or something.
There's not much more I could do.

[BennyAlex]

Hey I completely removed the mui drawer but it does not work still.
I think the main problem is the position fixed.
Is this something that is not supported by this libary at all?

https://codesandbox.io/p/sandbox/joyride-navbar-bug-xphckr

[gilbarbara]

Hey,

It shouldn't be because the element is fixed per se, but the margin-top with scrolling. I've changed the sidebar to use top instead, and the behavior is different. But because the header covers the sidebar, the auto-scrolling gets it wrong.
I've updated the waitScroll function to use a custom element scroll instead the window and it worked:

function waitForScrollEnd(element: HTMLDivElement) {
  let lastChangedFrame = 0;
  let lastTop = element.scrollTop;

  return new Promise<void>((resolve) => {
    function tick(frames: number) {
      if (frames >= 500 || frames - lastChangedFrame > 20) {
        resolve();
      } else {
        if (element.scrollTop !== lastTop) {
          lastChangedFrame = frames;
          lastTop = element.scrollTop;
        }
        requestAnimationFrame(tick.bind(null, frames + 1));
      }
    }
    tick(0);
  });
}

Set a ref and pass it to the Box wrapper for the List

  const sidebarRef = React.useRef<HTMLDivElement>(null);
  ...
    <Box
    ref={sidebarRef}
    component="nav"
	...
	>

And update the code in the callback to:

if (action === ACTIONS.UPDATE && lifecycle === LIFECYCLE.TOOLTIP) {
	waitForScrollEnd(sidebarRef.current!).then(() => {
		console.log("end");
		window.dispatchEvent(new Event("resize"));
	});
}

That's it. Since it's an implementation problem, I can't help anymore. Good luck.