search

gilbarbara / react-joyride

Create guided tours in your apps
https://react-joyride.com/
MIT License
6.64k stars 519 forks source link

`placement: "center"` on the first step of a controlled tour can cause issues in controlled tour mode #838

Closed JordanDC2 closed 1 year ago

JordanDC2 commented 1 year ago

🐛 Bug Report

If in controlled tour mode with a placement: "center" step prop, when clicking the back button to go back to the first step the tour will not fire the action: "prev" type: "step:before" callback event, nor the subsequent tooltip update event, thus causing the tour to break.

This issue appears to happen on the first step of the tour. Subsequent steps with placement: "center" appear to be unaffected.

To Reproduce

  1. Run a tour in controlled mode with the first step having placement: "center"
  2. Go to the second step in the tour
  3. Go back to the first step in the tour and the events do not fire

Expected behavior

The events should fire allowing the tour to continue.

Link to repl or repo (highly encouraged)

https://codesandbox.io/s/react-joyride-center-placement-first-step-frcz13

Run npx envinfo --system --binaries --npmPackages react-joyride

Paste the results here:

System: OS: macOS 12.5 CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz Memory: 3.80 GB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 7.24.1 - ~/react-storybook/node_modules/.bin/npm npmPackages: react-joyride: ^2.4.0 => 2.4.0

vishwakarmanikhil commented 1 year ago

@gilbarbara can you provide any solution for this, I encountered the same issue today.

terragady commented 1 year ago

same issue for me, breaking the tour when I am coming back to step 1. Also noticed that it is depended on other things, if you do not use custom callback it works fine, and if target is not set to some wrappers around elements.

gilbarbara commented 1 year ago

Fixed in 2.5.2

xNiallC commented 1 year ago

Hi, I'm still having an issue with this on 2.5.2.

I have a tour where the first step has placement: center and target: body. If I go to the next step, which is a regular targeted tour step that highlights an element, then go back to the first step, I can no longer go forward again.

I don't have this issue in tours where all the steps are targeted, only when returning to the first step which has placement: center.

Thanks :)

gilbarbara commented 1 year ago

Hey @xNiallC

The Basic example in the demo has this exact setup. Does it work for you? Check the source code for more details.

Otherwise, please provide a minimal reproducible codesandbox.