React-joyride: Finish callback not being trigerred

[nicmesan]

Hi, I am trying to use the callback which brings the object type "finished", but after updating to the last version of the library I am not getting it. I am getting al the other callbacks (step:before. tooltip:before and step:after, one for each step) but can't manage to get the finished one.

Do you have any ideas what can be causing this bug?

Thanks!

[IanVS]

Thanks for the report. I'll look into it ASAP.

By any chance, are you getting an "error:target_not_found" callback?

[nicmesan]

Thanks for your quick response!

I am not getting any kind of error, the callback is just not being executed.

[gilbarbara]

Hey,
I just updated the demo with v1.9.0 and it is triggering the finished callback both is continuous and single modes.
Did you get any other warnings in the console? Are all your steps mounted? Is your app public?

[nicmesan]

I am not getting any warning in the console, and unfortunately my app is not public, but I can show you the code of the component in discussion:

class Component extends Component {

componentDidMount() {
   // function triggering component re-render
}
componentDidUpdate (prevProps) {
        // Load walkthrough step the first time the chatroom components are loaded
        if (prevProps.loaded !== 'success' && this.props.loaded === 'success' && this.props.userInformation.firstTime) {
            const steps = [
                {
                    text: 'example',
                    selector: '.nb-item-link:nth-child(2)',
                    position: 'bottom',
                    type: 'hover',
                },
                {
                    text:  'example',
                    selector: '#play-button',
                    position: 'top',
                    type: 'hover',
                },
                {
                    text:  'example',
                    selector: '.ap-facebook-group',
                    position: 'top-right',
                    type: 'hover',
                },
                {
                    text:  'example',
                    selector: '.input-container',
                    position: 'top',
                    type: 'hover',
                },
            ];

            this.addSteps(steps);

            // Start the walkthrough
            setTimeout(() => {
                console.log('starting joyride', this.state.steps)
                this.joyride.start(true);
            }, 3000)
        }
    }

addSteps (steps) {
        console.log('add steps called')
        const joyride = this.joyride;
        let newSteps = steps;

        if (!Array.isArray(newSteps)) {
            newSteps = [newSteps];
        }

        if (!newSteps.length) {
            return;
        }

        this.setState(function (currentState) {
            currentState.steps = currentState.steps.concat(joyride.parseSteps(newSteps));
        })
    }

        walkThroughCallback(data) {
             // all callbacks except "finish" one logged correctly
             console.log('callback called', data)
        }
render() {

                                     <Joyride
                            ref={c => (this.joyride = c)}
                            debug={false}
                            steps={this.state.steps}
                            showBackButton={false}
                            type="continuous"
                            showOverlay
                            locale={{
                                last: (<span>'Got it'</span>),
                                next: (<span>{'next'</span>),
                            }}
                            callback={this.walkThroughCallback}
                            disableOverlay
                        />
}
}

Again, all 4 notifications are showing correctly and all callbacks are being executed correctly except the finish one.

This are the final logs:

Thanks again!

[nicmesan]

Confirmed, I downgrade the version to the 1.5.1 and now is working back as normal.

[gilbarbara]

What about those "Did not provide a step object"? Did you fixed that?

[IanVS]

This isn't directly related, but please note that you can greatly simplify your component now, especially if you aren't dynamically adding/removing steps.

If you have a static array of steps, there's no need to put them into your component's state, just provide them directly to steps on the <Joyride />. It _used_ to be necessary to "pre-parse" the steps, which is why they had to be kept in state. But that's no longer needed, so you can remove the addSteps method.

Also, instead of calling this.joyride.start(true), you could set the autoStart prop to true and then when you are ready to start just set the run prop to true. You can seen an example of this in our test demo.

Without some complete code that reproduces the problem you're having, I think we're not going to be able to troubleshoot this any further. If you're able to put together a small repo which demonstrates the issue, that would be very helpful. Otherwise, I don't think there's anything we can do, unfortunately.

[nicmesan]

Thank you very much four your help @IanVS and @gilbarbara and sorry for the delay in my answer. I will try to simplify my component first, but I doubt this is going to solve the issue. When I have a little more time, I will dig a little bit further to see if I can find the bug.

Thanks again!

[hew]

I am also getting the behaviour described by @nicmesan. I'll downgrade for now.

[IanVS]

@hew can you provide a minimal reproducible repo? That would help us immensely.

[hew]

My app is also not public, unfortunately. It's too complicated to justify the time to break it out. I was on version 1.8, and I just tried upgrading to 1.10, but no luck for either. Like the OP, everything works, just no 'finished' callback. I have workarounds I can use, so not a HUGE deal, but that callback would be nice.

[hew]

I actually I decided to just whip up a test repo. Even just a bare install of 1.10.0 results in no finished callback firing.

https://github.com/hew/joyride-test-repo

[gilbarbara]

hey!
I figured out what is happening..

We are refactoring the source continuously to rely more and more on props only instead of the clunky refs methods.
If you update your Joyride component with run={boolean} and autoStart={boolean} props (and remove your this.joyride.start(true) call) it will trigger the finished event.
I'll deprecated those methods and fix the problem it in the next minor update.

[hew]

That's for responding. I'll give that a shot :)