React-joyride: Arrow positioning issue

[jducro]

On a continuous tour, the arrow gets stuck on the right of the tooltip (left: 95%) if I pause and restart the tour it then get properly positioned.

After next:

After closing and reopening:

[gilbarbara]

hey,

can you post your step config?

[gilbarbara]

which version btw?

[jducro]

Version: 1.4.7

Steps:

steps: [
    {
      title:    'Search',
      text:     'lorem ipsum',
      selector: '#react_dp_agent_top_bar .item.search-box',
      position: 'bottom'
    },
    {
      title:    'History',
      text:     'lorem ipsum,
      selector: '#react_dp_agent_top_bar .item.recent',
      position: 'bottom'
    },
    {
      title: 'Create',
      text:  'lorem ipsum',
      selector: '#react_dp_agent_top_bar .item.add',
      position: 'bottom'
    }
  ],

[gilbarbara]

Please try v1.4.8 and let me know if it works

[jducro]

I updated to 1.4.8 and it does the same :/

[gilbarbara]

What about 1.5.0?

[jducro]

I still have the same problem, it's being fixed on the redraw though.

[Firfi]

I have the same issue in adding step. The step element is definitely visible at the time of adding (checked with crazy setTimeout's). It's being fixed IF I call calcPlacement on joyride tooltip animation end (it's 400ms currently).

              this.refs.joyride.start(true);
              setTimeout(() => { // wrong triangle position in some cases (?)
                this.refs.joyride.calcPlacement();
              }, 500); // 400 won't work though! Should be > 400

[Firfi]

I've just noticed that calcPlacement is marked as a private method, therefore I consider it a dirty hack (necessary though to make arrows work correctly)

[gilbarbara]

I think 52c10115252ec87a8fd7aa409e187ae9a0b0b764 fixed. Let me know.

[brandonmp]

sorry to do this, but this bug is still alive.

Here's a gif of the action.

If it's relevant, the tour is set to continuous, but I am manually changing run from true to false to do things inbetween steps. This doesn't seem to affect the arrow problem, though.

[brandonmp]

joyride v 1.10.1 btw

[brandonmp]

figured a temporary fix. it's jankier than the 1987 volkswagen jetta I owned in high school, but works good enough for now:

in a callback, I just force a redraw a split-second after the the tooltip is drawn. The delay is necessary, and 250ms is as brief as i've tried it

stepCallback = ({ type, index, step }) => {
    if (type === 'tooltip.before') setTimeout(() => { this.forceUpdate() }, 250)
}

[gilbarbara]

@brandonmp did you have this issue with the demo? Do you have any idea what causes it?

[brandonmp]

nope, when i fire up the demo in the main repo on my machine, it appears to work fine.

no idea tbh--i can say that i don't have the problem when choosing left or right positioning (i.e., when arrow is on left/right of tooltip).

My repo is private but i put a sample of the relevant code in a gist. There you can see the config I'm jusing w/ joyride, as well as how I'm implementing the callback

Note that I only included a few of the steps of my tour for simplicity's sake. The handleStep callback does things like clicking buttons, etc., later in the tour, which is why there's all that logic there.

The arrow bug, however, presents in the third step of the tour, before any of the DOM-manipulating logic is called.

[hew]

I am getting this issue too. No idea what causes it unfortunately.

[dkhovrich]

Hello! Why is it topic closed?
I am getting the same issue.
v1.11.2

[iordneto]

I am getting the same issue too :(
v1.11.4

[gilbarbara]

Please try V2
npm i react-joyride@next