Modal is sometimes off screen

[Christian Jess Mark]

When testing out the Steps component, the modal is sometimes about 800px to the left and therefore offscreen. I only see the overlay.

This is attached to a component that slides in, so that might be why - at least I couldn't reproduce it on a fixed UI part.

I realize you might need a sandbox to look into this, but I wanted to be sure this library is maintained before trying that, since it's a little complex the setup.

I might also look into it myself, if you're taking PR's?

[HiDeoo]

Indeed, a sandbox of the issue would be really helpful. In the past, most of the time, position issues have been related to Intro.js directly and not the React wrapper, but it could still be an issue in this wrapper that we could take a look at.

Regarding maintenance, I'm no longer using Intro.js myself, but I'm still maintaining this wrapper when I have some free time, and I'm also totally opened to PRs, I just accepted a PR and published a new version of the library that now includes TypeScript type declarations.

Feel free to re-open the issue if you ever manage to setup a repro in a sandbox.

[Christian Jess Mark]

Thanks for the reply @HiDeoo.

We managed to solve the issue by wrapping the Steps component in a conditional that we delayed with setTimeout

const [renderTutorial, setRenderTutorial] = useState(false)

useEffect(() => {
  setTimeout(setRenderTutorial, 1000, true)
}, [])

{renderTutorial && (
  <Steps
  ...
  />
)}

Seems the JS calculation of the position, was not always syncing with the animated component.