react-joyride: Overlay not rendering when steps are skipped (Target not mounted)
🐛 Bug Report
Under yet to be determined specific circumstances the overlay is not rendering when steps are skipped. But here’s what I know…
To Reproduce
Browser: Chrome React-Joyride Version: 2.0.5
I set up React-Joyride to render 3 steps like so…
"steps": [
{
"title": "step1",
"content": "step1",
"placement": "right",
"target": "div[title='step1']"
},
{
"title": "step2",
"content": "step2",
"placement": "left",
"target": "div[id='step2']"
},
{
"title": "step3",
"content": "step3",
"placement": "left",
"target": "div[class~='icon-node'][title='step3']""
}
]
No Missing DOM Nodes
If the divs for step1, step2, and step3 exist everything proceeds normally when I start the tour. The overlay is displayed correctly at each step.
Missing One or More DOM Nodes
If the div for step2 is missing when I start the tour the overlay is displayed on step1 (only on the first pass). I click next and the tour correctly skips to step3 but the overlay is not displayed. If I click back, the overlay is also missing from step1.
If I stop and restart the tour this issue repeats itself.
I noticed that when the overlay is not displayed, the DOM has an empty <div id="react-joyride-portal"></div> element.
Expected behavior
The overlay should be displayed in all cases.
Link to repl or repo (highly encouraged)
I have been trying to replicate this issue in a repo but I cannot, yet. Unfortunately, this seems to be specific with the application in which I am integrating React-Joyride. I am hoping for some additional tips as to where to look for potential issues.
I looked at the source and it seems like the only case where a <div className="react-joyride__overlay" /> element should not be rendered is either when the overlay is disabled (it is not in our app) or when the lifecyle is not TOOLTIP (our tooltip shows so I think lifecycle is tooltip).
Run npx envinfo --system --binaries --npmPackages react-floater
OS: Windows 10
CPU: (2) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
Memory: 1.97 GB / 8.00 GB
Binaries:
Node: 10.14.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.15.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Comments: 16 (6 by maintainers)
@xiajinchun i’m have same problem, i noticed that the problem is generate when my data from redux update my component. However i didn’t resolve in moment