q-tab offsetwidth error

[Muslim-Boy]

What happened?

When I navigate from a page where q-tab is used to any other page, I get the following error:

QTabPanels-5q1hpjJq.js:1 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'offsetWidth') at QTabPanels-5q1hpjJq.js:1:6026
at index-lUfzcXt5.js:36:13635

What did you expect to happen?

The issue is specifically coming from this part:

The problem only occurs when this part is added.

Reproduction URL

https://codepen.io/rstoenescu/pen/VgQbdx

How to reproduce?

https://codepen.io/rstoenescu/pen/VgQbdx

Flavour

Quasar CLI (@quasar/cli | @quasar/app)

Areas

Components (quasar)

Platforms/Browsers

Firefox, Chrome, Microsoft Edge

Quasar info output

<q-card v-if="tabsLoaded" class="shdw-card r-8 q-mt-md">
      <q-card-section>
        <q-tabs v-model="tab" inline-label :breakpoint="0" align="justify" color="primary" class="text-primary sh-tabs">
          <q-tab v-for="(item,index) in tabs" 
          :name="item.name" 
          :label="t(item.title)"
          :key="index"
          />
        </q-tabs>
      </q-card-section>
    </q-card>

Relevant log output

QTabPanels-5q1hpjJq.js:1 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'offsetWidth')
    at QTabPanels-5q1hpjJq.js:1:6026
    at index-lUfzcXt5.js:36:13635

Additional context

Apologies, I wasn't able to provide the code snippet earlier. The issue is happening in a more global context. It occurs when I switch to another menu in the layout, i.e., when the router is changed, the problem appears.

I am sory i use quasar version 2

[Muslim-Boy]

Can someone help me change the label from "Qv1" to "Qv2"? I made a mistake.

[rstoenescu]

Hi,

Please take the time to write up a reproduction Codepen with clear instructions. The one supplied is ours. Thank you.

[Seanitzel]

I also encountered this bug.
Spent some time trying to reproduce but couldn't - What I know is it only happens when clicking a tab redirects to a different page(doesn't matter if you use q-route-tab or a q-tab with a click handler).

Anyway the issues seems to be here in the q-tabs component

    function recalculateScroll() {
      registerScrollTick(() => {
        updateContainer({
          width: rootRef.value.offsetWidth,
          height: rootRef.value.offsetHeight
        });
      });
    }

So maybe for now you can just wrap the update with an if statement

    function recalculateScroll() {
      registerScrollTick(() => {
       if(rootRef.value) {
        updateContainer({
          width: rootRef.value.offsetWidth,
          height: rootRef.value.offsetHeight
        }
        });
      });
    }

[Muslim-Boy]

I have no experience with CodePen. How can I create a demo to demonstrate page switching functionality, preferably using a vue-router?

[Seanitzel]

I tried to create a reproduction here:
https://stackblitz.com/edit/quasarframework-stackblitz-templates-vkuchp3h?file=src%2Fpages%2FIndexPage.vue
and tried replicate some things from my project but the error doesn't seem to appear.
Eventually I just created my own custom tabs after spending about an hour on this

[rstoenescu]

Fix will be available in Quasar v2.17.5

[Seanitzel]

Cool, Thanks :)