Add a way to prevent tabs switching

[vincentdh]

Is your feature request related to a problem? Please describe...

I have a b-tabs with form in b-tab. If the form isn't saved before the tab is switch, I would like to prevent the tabs from switching to an other tab

Describe the solution you'd like

An event could be fired before changing the tab and preventDefault() or return false could stop the tab switching process

[vincentdh]

I've though using v-model and verify if the form is saved and return to the tab if not, but if the tabs are "lazy" the component is destroyed and the form will be lost before you returned to the tab.

[tmorehouse]

You can set the disabled prop to true on <b-tab>s that users shouldn't be able to access until certain criteria is met.

For accessibility reasons, it is best to present the user with a disabled tab button than one that is clickable but doesn't do anything (as event.preventDefault() is not relayed back to the user via any feedback).

[vincentdh]

For convenience, I would like to alert my users that the form isn't saved and ask if they want to save/continue editing/discard changes and depending the choice they made, let them switch tabs.

[tmorehouse]

BootstrapVue v2.1.0 has been released, which has added the ability to prevent tabs from changing.

[timoteo7]

Can you show any example, please ?

how i call bvEvent.preventDefault() ?

What do I do after this?

<b-tabs @activate-tab.prevent >

and do not receive this:
$event.preventDefault is not a function

I did not understand by the documentation, I'm obviously doing something wrong

[rubebop]

For convenience, I would like to alert my users that the form isn't saved and ask if they want to save/continue editing/discard changes and depending the choice they made, let them switch tabs.

I have the exact same use case and had the exact same questions as @timoteo7.
Did someone figured this out?

[rubebop]

I found a working example here:
https://stackoverflow.com/a/60369824/7894940