search

gilbarbara / react-joyride

Create guided tours in your apps
https://react-joyride.com/
MIT License
6.62k stars 519 forks source link

React Joyride does not highlight elements properly that are hidden in horizontal scroll #1003

Closed akmtagline closed 4 months ago

akmtagline commented 4 months ago

🐛 Bug Report

I have a horizontal menu on my website. I want to show an app guide for one of the menu items. But, it is not visible on the screen. You need to scroll horizontally to see that element on the page. When I go to that step, it breaks the UI and the tooltip shows up outside the viewport causing the overflow on the web page.

To Reproduce

Steps to reproduce the behavior:

  1. Step target should be the element that is not initially visible on the scren.
  2. Start the tour.
  3. Go to that particular step.
  4. It highlights the element, but it breaks the UI and also shows a horizontal scroll on the whole web page.

Expected behavior

It should first scroll the element into the view and then highlight the element.

Link to Codesandbox

https://codesandbox.io/p/sandbox/icy-sun-5dv6s4

gilbarbara commented 4 months ago

Hey @akmtagline

The library doesn't support horizontal scrolling. You could use the controlled mode to stop the tour, scroll to it, and start again.