put focus on active q route tab component?

[laferte-tech]

Hello,

let's say i have 10 q-route-tab component inside a q-tabs component. When the screen is not big enough to display all of them, we can use arrows to navigate but the "focus" is not put on the active q route tab but always on the first one.
For example, from another page, if i navigate to 9nth component in the list the active class is working great but the focus is not put on this component, it's always the beginning (ie the first q route tab) of qtabs that is displayed and the user need to scroll to the end to see that it's the 9nth component that is active.
Not sure if it's clear but i would like to know if it's possible to put focus on the active q route tab component ? (to avoid to have to scroll the whole list to find it).

Thanks a lot

[hawkeye64]

You can use onBeforeUnmount to save the current tab to a variable outside of your component containing the q-tabs. You can then use onMounted to set the v-model used by q-tabs to ensure the correct tab is set.

[laferte-tech]

Hi,
thanks for your answer but it's not working with v-model. I think my question was not so clear but taking this modified sample from Quasar:
https://codepen.io/grandours35/pen/wvdJPZY

you can see that the "focus' (sorry i don't know how to call it) is not put on the active tab.
We need to scroll to reach "test2" which is the tab that have the v-model.
I would like to have "test2" visible directly when showing the q-tabs.
Maybe i'm missing something?
Thanks for your help

[hawkeye64]

I would say this is a legit issue. If the starting tab is not visible, it should be made visible. I'd expect the same from components like a carousel, scrolling list, etc.

[pdanpdan]

Check this: https://github.com/pdanpdan/quasar/releases/tag/quasar-pdan-v1.15.22-beta.4

In package.json replace quasar dependency with:
"quasar": "https://github.com/pdanpdan/quasar#quasar-pdan-v1.15.22-beta.4"

Then do a yarn or npm install and start the app again.

Please report if you find something not working.

[pdanpdan]

thanks for catching it

[laferte-tech]

Hi @pdanpdan
I see that the fix is still not in 1.16 (based on your release of 1.16-beta 3 in your repo)
Do you know if someday it will be added to the main branch?

Thanks a lot

[pdanpdan]

The fixes in my branch are not expected to land in the Quasar v1, sorry - it's going to be only critical fixes for V1.
But I'll keep updating my branch and keep it in sync with official one. So as long as you stay on v1 you can use it.

[pdanpdan]

1.16-beta3 should have the fix

[laferte-tech]

Hi, sorry for late answer.
Ok thanks for the information, i understand.
And thanks also for your work

[rstoenescu]

Focus enhancement will be available in Quasar v2.4 and v1.17