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)

Most upvoted comments

@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