React-joyride: Issue with Beacon in React 15.x

Created on 14 May 2018 · 6Comments · Source: gilbarbara/react-joyride

Expected behavior

Beacon is visible after run:true

Actual behavior

Beacon is added to DOM but always has visibility : hidden. If I changed it mannualy - next steps works fine. Seems it's issue with react version, because on 16.2.0 - all works. What version should I use for 15.5.4 or it possible to fix this for older version?

Steps to reproduce the problem

React version

15.5.4

React-Joyride version

2.0.0-10

Error stack

If you are having UI issues, make sure to send a public URL or codesandbox example.
default

Source

sarates

Most helpful comment

Temporary fixed by

componentDidMount() { this.setState({ run: true }, () => { document.getElementById('react-joyride:0').getElementsByTagName("div")[0].children[1].style.visibility = 'visible'; }); }

but I hope that this can be done in a civilized way (it produce bugs on tour first step and on tour reload)

sarates on 15 May 2018

👍2

All 6 comments

Same problem here using [email protected] and [email protected]

guytepper on 15 May 2018

Temporary fixed by

componentDidMount() { this.setState({ run: true }, () => { document.getElementById('react-joyride:0').getElementsByTagName("div")[0].children[1].style.visibility = 'visible'; }); }

but I hope that this can be done in a civilized way (it produce bugs on tour first step and on tour reload)

sarates on 15 May 2018

👍2

I think this is the reason why I can't restart the tour either. All the needed elements are in the DOM but their visibility is hidden and opacity 0.

varzock on 14 Jun 2018

I got it working with setTimeout and unmounting Joyride from DOM altogether. It timeouts in 300ms (which is the opacity / visibility animation duration) after which the component is unmounted.

After this when I restart Joyride tour it works without any setState errors since it mounts itself again.

varzock on 15 Jun 2018

Fixed in [email protected]