HiDeoo / intro.js-react

Intro.js react wrapper
MIT License
395 stars 58 forks source link

going to old position of element #106

Closed RoniJackVituli closed 1 year ago

RoniJackVituli commented 1 year ago

Describe the bug

I don't know if it has this feature to fix the problem because I didn't find it in the doc

The Problem is:

I create the OnChange function to make some actions in my code,

  const onChangeStep = (nextStepIndex: number) => {
      if (nextStepIndex === 3) {
        updateStepElement(nextStepIndex);
        dispatch(windowSlideAction.openGroups({ open: true }));
      }
  };

so when I got to StepIndex 3 I open some window, and the position of an element in step 3 is changed to another position and the "introjs-helperLayer" && "introjs-tooltipReferenceLayer" are going to the old position of element in step 3

The Step 3 is going to Groups btn image

but when i got to step 3 i open the window of the groups and as that you can see is going to old position and not to new position of groups button.

image

To Reproduce

every time I change the position of some element in my steps array then is going to the old position, and not to the new position

Expected behavior

That is going to the correct position also if i change the element position, i assume is will follow after the element in the steps array.

How often does this bug happen?

Every time

System Info

No response

Additional Context

No response

HiDeoo commented 1 year ago

In the past, most of the time, position related issues have been related to Intro.js directly and not the React wrapper as it does not do much regarding positioning.

I made a small repro based on what you are describing using a "sidebar" as a "window" to move the "group" button. If this sidebar is basic and conditionally rendered, there is no issue in opening it at a specific step:

https://github.com/HiDeoo/intro.js-react/assets/494699/a72b22b4-2644-4fc7-8c0d-57f0dd2920da

However, as soon as I add an animation for example for the sidebar opening, the positions would be invalid and I would assume this may be the issue you are encountering:

https://github.com/HiDeoo/intro.js-react/assets/494699/cc046bc1-788d-412f-9d96-9104bcd15d71

There has been related issues in the past with various fixes like temporarily hiding the steps during the animation with a timer, e.g. https://github.com/HiDeoo/intro.js-react/issues/63#issuecomment-872012210 however waiting directly for the animations to be over and not using a set amount of time might be a better solution.

I guess you could also check if some people encountered a similar issue in the Intro.js repo and found potential workarounds. I will close this issue for now but feel free to share more infos or a repro if you think if this is directly related to intro.js-react.