Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a way to prevent tabs switching #4273

Comments

@vincentdh
Copy link

@vincentdh vincentdh commented Oct 18, 2019

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
Copy link
Author

@vincentdh vincentdh commented Oct 18, 2019

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
Copy link
Member

@tmorehouse tmorehouse commented Oct 18, 2019

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
Copy link
Author

@vincentdh vincentdh commented Oct 18, 2019

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
Copy link
Member

@tmorehouse tmorehouse commented Nov 13, 2019

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

@timoteo7
Copy link

@timoteo7 timoteo7 commented Mar 25, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment