React-joyride: [V2] Click on the close button activate next step

[dshuvalov]

There are strange behavior in react-joyride V2.

Expected behavior
When I click on the close button at the step, I expect the tour to stop.

Actual behavior
This does not happen, instead the next step is turned on

Steps to reproduce the problem
Open demo and Basic example. Click on the 'Let's go' to start guide and the click on the close button (cross).

React version
16.3.2

React-Joyride version
2.0.0-8

Error stack

If you are having UI issues, make sure to send a public URL or codesandbox example.

[lbelavoir]

Same behaviour in React-Joyride 2.0.0-11

[dshuvalov]

@lbelavoir In my case Tutorial is closed in the callback via handler like this:

handleJoyrideCallback = data => {
    const { action, index, type, size } = data;

    if (action === ACTIONS.CLOSE && this.state.run) {
      return closeTutorial({ name });
    } 
  }

[gilbarbara]

On the basic demo, the second step had disableBeacon set to true, so it wouldn't show the beacon when closing the first step.
If you don't use the disableBeacon prop, it would close the current step and stop at the next beacon.

[lbelavoir]

@gilbarbara I'm using disableBeacon on every step I have and each time I click on close, it closes the step and always shows the next step.

[gilbarbara]

@lbelavoir yes, you are asking the step to NOT show the beacon, so it will open the tooltip automatically.
If you want to control the behavior of the close button, you need to use manage the lifecycle yourself with callback and stepIndex

[NicolasPerl]

Ran into the same problem. Solved it like this:

handleGuideCallback = (data: CallBackProps) => {
    const {  action } = data;
    const finishedStatuses: string[] = [STATUS.FINISHED, STATUS.SKIPPED];

    if (finishedStatuses.includes(status) || action == 'close') {
      this.setState({run:false})
    }
  };

This handles if user clicks the close button or clicks outside of the step. Hope this helps!