Navigating directly to a step causes issue with the back button

[rdagostino]

I'm running into an issue that occurs only when navigating directly to a step and then clicking on the back button.

Steps to reproduce:

1. Setup a wizard with a few steps
2. Enable routing
3. Navigate to the last step directly on a fresh browser session
4. Click back

The user is either taken to the previous page (non-wizard step) or nothing happens at all. I would expect it would know that there is a previous step and navigate directly to it.

I understand it's using the history API but looking to see if others have encountered this before.

This can also be replicated with the demo source.

https://0m6m4lrw20.csb.app/ice-king

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove no-issue-activity label or comment or this will be closed in 5 days.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity.

[akhilpai]

It looks like this is because the previous function uses the history.goBack function: https://github.com/americanexpress/react-albus/blob/master/src/components/Wizard.js#L35

which has no concept of steps. Perhaps replace it with an analogue of nextStep? https://github.com/americanexpress/react-albus/blob/master/src/components/Wizard.js#L66

[nellyk]

@akhilpai Thanks for looking into this. We are always open to Pull Requests 👍

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity.

[jayeshchoudhary]

I am still facing the same issue, if I hop directly to step 3 then back button takes me to browser home page or does nothing at all, I am referring to official examples page here

can someone please provide the correct example here?

@leibowitz @emmax86 @nellyk @akhilpai @rdagostino

[hydrandt]

@jayeshchoudhary the way I deal with it is using the push function that react-albus provides. You need to pass it the name of the step you want to move to, and it will push it into the history object. I pass next and previous functions to the child component like this:

next={next}
previous={() => { push('2'); }}