The QTabs component is quite useful, but in my opinion it has some omissions:

• It’s not redrawn automatically when a QTab item is inserted or removed – especially the navigation arrows visibility doesn’t change. I kinda solved this one by using a ready flag that gets updated when a new item is inserted, but it would be easier if the component did it already.
• When inserted, new tabs that go past the current width are not scrolled into view. Apparently there are not events for doing this.
• The mouse scroll wheel doesn’t do anything. Capturing the wheel events and sending clicks to the arrows didn’t work for me:

wheel_scroll: function(event)
{
  let arrows = this.$el.getElementsByClassName('q-tabs__arrow');
  let evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  // Here I chose one arrow for testing, but nothing happened:
  arrows[1].dispatchEvent(evt);
}

• It would be nice if users were able to drag individual tabs to change their order.

Would exposing some extra events and properties allow these actions? I don’t know. Any help is appreciated. Thanks!

Sorry, I thought the thread title made the point clear. I believe that tooltips may be even more important when a QBtn is disabled (to inform users the reason why it is disabled, for example). So I think tooltips should be enabled whether QBtns are disabled or not. It should be left to the programmers to decide if they want it to hide tooltips (e.g. using v-if). Wrapping a control in a div or span works, but it’s more of a trick than a solution IMO. Hope it’s clearer now.

Hi,

I’m using :selected.sync="selected" in my QTree. When I click a node once it is selected. If I click it again it gets deselected. I’d like to change this behavior in such a way that when a selected node is clicked again it just does nothing, i.e. keeps the selection until I click another node. How can I do that?

Thanks in advance,

Thanks! I’ll try it. Looks much better than my CSS hack

@viswanathNK Thanks, that’s exactly what I wanted!

I thought the problem was gone, but no. Going back to 12.x allowed the app to be built, but unfortunately it seems the problem is still there.

Okay, I’ll try going back to 12.x and I’ll let you guys know. Thanks for the time being.

@dobbel, quasar info shows this:

What if you try it in a VM or other computer?

The project works in my colleague’s machine, so something must be different here. However I have many other Vue / Quasar projects and this is the only one with this kind of problem. (It’s the only one that uses quasar-cli. My other ones use vue-cli and Quasar as a plugin).

I can make the project available for testing if it helps.

Actually I already did this, several times. I even cleared up all my global npm modules and reinstalled everything, to no effect. Thanks anyway!

Hi,

I’m trying to deploy a minimal app (it’s essentially the quasar-cli example) but I keep getting the error [Vue warn]: Error in data(): “TypeError: Cannot read property ‘screen’ of undefined”. The template at MayLayout.vue starts with <q-layout>. The trace shows the error is at QLayout.js, line 43:

height: this.$q.screen.height,

As a test, I’ve replaced <q-layout> with <q-btn icon="help" />. This gives [Vue warn]: Error in render: “TypeError: Cannot read property ‘platform’ of undefined” at QBtn.js, line 71:

if (this.$q.platform.has.touch === true) {

So the obvious conclusion is that this.$q is undefined in those files, which I confirmed using the Chrome debugger. In the vue file, however, <div>{{ $q }}</div> shows $q normally.

Do any of you know of any condition that would make $q unavailable to the Quasar modules?

Any help is much appreciated. Thanks in advance!

In the QExpansionItem docs, Content section, the first two items are icon and expand-icon. Their descriptions are identical. In addition, the similarly named expanded-icon adds to the confusion. Maybe some more clarification in the docs would be helpful. Thanks!

Thank you guys for the great answers. Much appreciated!

Hi,

This question probably has a simple solution, but I can’t find it in the docs / Google / this forum. I’m creating a context menu and I need to determine the element under the mouse when the menu was called. Specifically, I want a right-click in a tab and move it left or right. Something like this:

<q-tabs
  v-model="selectedTab"
  >

  <q-tab
    v-for="tab in tabs"
    :key="tab.name"
    :name="tab.name"
    :label="tab.label"
    >

    <q-popup-proxy context-menu>

      <q-list>

        <q-item
          clickable
          @click="moveRight(selectedTab)"
          >
          <q-item-section>Move right</q-item-section>
        </q-item>

        <q-item
          clickable
          @click="moveLeft(selectedTab)"
          >
          <q-item-section>Move left</q-item-section>
        </q-item>

      </q-list>

    </q-popup-proxy>

  </q-tab>

</q-tabs>

In the code above, the argument passed to moveRight() and moveLeft() won’t do what I need. I want it to move the tab where the context menu was called, not the currently selected tab.

Thanks in advance.

Thanks to your tip, here’s the resulting code, complete with Intellisense:

/** @type {quasar.QTooltip} */
const tooltipProps = QTooltip.options.props;
tooltipProps.delay.default = 550;

Great answer, thanks for the quick solution.