@click.prevent on Tab buttons?

[davatron5000]

I have a not-so unique and weird situation where I'm using Tabs inside a <form> element. But when I do that, clicking the injected child <button> submits the form.

Ideally I could do <Tab @click.prevent=""> or something to pass that down to the injected button? Or maybe there's something I'm not thinking of.

• @click.stop="test()" didn't work in my tests
• @click.prevent="test()" didn't work
• [role="tablist"] button { pointer-events: none } didn't work

EDIT: In my situation the tabs were inside a modal inside a form (i know i know... this is getting wild), so I was able to portal-vue as a workaround, so I'm not blocked or anything.

[jakedohm]

Hey @davatron5000! I've actually hit this issue before, so I agree it's common enough!

I've thought about adding role="button" to the buttons by default, which will keep them from submitting the form automatically. Would that work for your use-case?

Unfortunately, last time I checked it wasn't possible for me to check for even modifiers (like .stop or .prevent), so I'm not sure if that route is doable.

[davatron5000]

Maybe it's as easy as adding event.preventDefault() to the click handler?

https://github.com/jakedohm/vue-accessible-tabs/blob/1f32933b497feccb26620262c8066ec4afea238c/src/components/Tab.js#L73-L75

That could have unintended consequences maybe (I doubt people are using tabs to submit a form tho 😄). It does seem like you'd want to click to be localized to the component and not do other stuff.

The role="button" workaround could maybe work too. Might be the lightest touch option for you.