Quasar: [V1][Request]Allow stuff in q-tab to be clickable

[s3rg3]

Hello,

Could it be possible to have stuff to be clickable in q-tab like it was in V0.17?

i recently switched from html with bootstrap to quasar and, with V0.17 i was able to add a close button like this:

<q-tab name="messages" icon="fas fa-envelope"> <q-btn icon="fas fa-times" size="sm" @click="close('messages')"/> </q-tab>

With V1 it is not possible anymore all clicks are captured by the q-tab component, i tried to add event modifiers but i didn't make it to work.

Thank you

[rstoenescu]

Hi,

Have you tried with @click.stop="yourHandler" on the "stuff" inside QTab? That you stop the propagation of the click event to QTab.

[nothingismagick]

@hawkeye64 - Do you think we should put @click.stop="yourHandler" in the docs if it isn't clear enough for the readers?

[s3rg3]

Yes i already tried it and it didn't work, this is why, i written in the first post "i tried to add event modifiers but i didn't make it to work".

Thing is the problem is not the propagation, with bootstrap i did this to stop the propagation to make it close and not re-open instantly, but with quasar V1 the click on the button is not registered at all (a simple console.log() doesn't work).

[nothingismagick]

@s3rg3 - please update your post with a codepen to show what you have done.

[s3rg3]

here is the code pen:
https://codepen.io/anon/pen/OdBKeG?editors=1111

i noticed if i remove the css, the console log is working with it it doesn't

i'm on linux with chromium

[DaedalusDev]

Hi !

https://github.com/quasarframework/quasar/blob/f4694228d68193a7c86c030507456deda0c135c3/quasar/src/components/tabs/QTab.js#L102

This is a CSS trick provided by .no-pointer-events class. All mouse events are skipped inside the tab.

GL.

[s3rg3]

For those looking for a workaround, add this style: "pointer-events: auto;" to the buttons inside q-tabs to make them clickable