What is the best practice to cancel tour if user click back browser button?

I can prevent user for clicking other button component that route to outside current component using overlay.

But if user clicking back browser button, the tour is still running.

so i use navigation guard and search the classname like this

beforeRouteLeave (to, from, next) {
    const tourOverlay =  document.getElementsByClassName('shepherd-modal-is-visible')[0]
    const tourStep = document.getElementsByClassName('shepherd-enabled')[0]

    if (tourOverlay && tourStep) {
      tourOverlay.remove()
      tourStep.tourStep()
    }

    next()
}

Is there a best practice to achieve this?

@jarooda

@jarooda I am not sure what you mean here. If the user clicks the back button, wouldn't the tour go away on its own?

hi @rwwagner90 , I create a reproduction of my bug here https://github.com/jarooda/test-vue-shepherd

step to produce

run app
go to /about using link in nav

3. click back using browser button

thanks

Navigation Menu

Repository navigation

What is the best practice to cancel tour if user click back browser button? #44

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

What is the best practice to cancel tour if user click back browser button? #44

Description

Activity

RobbieTheWagner commented on Apr 24, 2022

jarooda commented on Apr 24, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions