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

Closed
vincentdh opened this issue Oct 18, 2019 · 4 comments · Fixed by #4274, mariazevedo88/hash-generator-js#17 or CloudsdaleGroup/AnimFM#3
Closed

Add a way to prevent tabs switching #4273

vincentdh opened this issue Oct 18, 2019 · 4 comments · Fixed by #4274, mariazevedo88/hash-generator-js#17 or CloudsdaleGroup/AnimFM#3

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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 added a commit that referenced this issue Oct 18, 2019
…ctivate-tab` event (closes #4273) (#4274)
@tmorehouse

This comment has been minimized.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.