No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    [v1] QTabs with 'deselect'

    Framework
    3
    11
    550
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      dsl101 last edited by

      I’d like to use QTabs, but with the added feature that clicking on the currently active tab would ‘deselect’ it (i.e. set the model to null). So, I can’t use the usual @input handler, as that only fires on a change, not when clicking the currently active tab. And using the @click handler passes the mouse event rather than the tab key.

      I’ve found by scouring the mouseEvent parameter passed to the click handler that this monstrosity gets the key:

            <q-tabs
              :value="model"
              @click="handleTabClick"
            >
      .
      .
      .
            handleTabClick (mouseEvent) {
              const key = mouseEvent.srcElement.__vue__.$vnode.key
              if(key === this.model) {
                this.model = null
              } else {
                this.model = key
              }
            }
      
      

      but that looks very fragile and unwieldy. Is there an easier way to implement tabs with a ‘deselect’ feature?

      1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman last edited by metalsadman

        @dsl101 you really don’t need a feature for this imo. just use v-model and add another model to record your last active tab, then on your handleTabClick do the checking. something like this:

              <q-tabs
                  v-model="model"
                  @click="handleTabClick"
                >
        ....
        data () ... lastSelectedTab: ''
        ...
        method ... handleTabClick () {
              if(this.model !== this.lastSelectedTab) {
                this.lastSelectedTab = this.model 
              }else{
                this.lastSelectedTab = ''
                this.model = ''
              }
            }
        

        in action https://codepen.io/metalsadman/pen/PgxzLN

        1 Reply Last reply Reply Quote 0
        • D
          dsl101 last edited by

          Thanks—I actually had that in the code before, but was then convinced it should be ‘easy’ to tell if the clicked tab was the current one from the event, or at least get it’s key…

          1 Reply Last reply Reply Quote 0
          • metalsadman
            metalsadman last edited by

            @dsl101 made it into a directive so you can use v-tab-deselect on your q-tabs. https://codepen.io/metalsadman/pen/zXyqyK

            1 Reply Last reply Reply Quote 0
            • D
              dsl101 last edited by

              Thanks. It has a slight problem though which is that if there are lots of tabs and the scroll arrows show, clicking the scroll arrows also closes the currently active tab. I updated the pen for the first set of tabs to illustrate, but haven’t had chance yet to see what the fix for that might be… https://codepen.io/dsl101/pen/EJrVLw

              1 Reply Last reply Reply Quote 0
              • D
                dsl101 last edited by

                Also, in the console in your original pen (and my fork), there are warnings about prop validation failing in QTabs whenever the tab is ‘deselected’:

                "[Vue warn]: Invalid prop: type check failed for prop 'value'. Expected Number, String, got CustomEvent 
                
                1 Reply Last reply Reply Quote 0
                • rstoenescu
                  rstoenescu Admin last edited by

                  @dsl101 Pushed a commit to handle this specific case. Will be available in quasar beta.20

                  commit 11f2e05146e1dfccb03504b36cfe84e3bd063863
                  Author: Razvan Stoenescu <razvan.stoenescu@gmail.com>
                  Date:   Fri Apr 26 21:16:35 2019 +0300
                  
                      fix(QTabs/QTab/QRouteTab): Guard against "input" event messing with the model
                  
                  1 Reply Last reply Reply Quote 0
                  • D
                    dsl101 last edited by

                    Thanks @rstoenescu. @metalsadman do you have any ideas how to avoid the scroll arrows issue? I tried moving the logic into the tabs themselves, but it becomes quite unwieldy, and requires the directive and handler on every single tab… But it does have the potentially small advantage that individual tabs could be set to close on click—something like this, where the first 2 tabs would ‘close’ when clicked on again, but the others wouldn’t:

                    <q-tabs
                      :value="tab"
                      dense
                      class="text-grey"
                      active-color="primary"
                      indicator-color="primary"
                      align="justify"
                      narrow-indicator
                      v-tabs-deselect
                    >
                      <q-tab v-tab-deselect name="mails" label="Mails"></q-tab>
                      <q-tab v-tab-deselect name="alarms" label="Alarms"></q-tab>
                      <q-tab name="movies1" label="Movies1" ></q-tab>
                      <q-tab name="movies2" label="Movies2" ></q-tab>
                      <q-tab name="movies3" label="Movies3" ></q-tab>
                      <q-tab name="movies4" label="Movies4" ></q-tab>
                      <q-tab name="movies5" label="Movies5" ></q-tab>
                      <q-tab name="movies6" label="Movies6" ></q-tab>
                    </q-tabs>
                    

                    But I think it needs both directives, and I got a bit lost in connecting together the various events that would be needed here…

                    1 Reply Last reply Reply Quote 0
                    • metalsadman
                      metalsadman last edited by metalsadman

                      @dsl101 updated the pen to check if the clicked button is the left / right arrow, still can’t get rid of the warning tho. here https://codepen.io/metalsadman/pen/zXyqyK. anyway, if it’s quite ugly for you, maybe just go for a mixin route.

                      1 Reply Last reply Reply Quote 0
                      • D
                        dsl101 last edited by

                        Nice. I was struggling trying to figure it out inside the event listener. Much cleaner to do it earlier :). I think Raz’s comment was that the warning will go away with beta-20. The final snag is that on first load, with Mails tab is open, but clicking the tab doesn’t close it, I guess because lastSelectedTab isn’t initialised on first render. For me, that doesn’t matter, because my app starts with no tabs selected, but for general use it would be important.

                        @rstoenescu is this something you’d consider implementing ‘properly’ within QTabs at some point? If so, I’m happy to write this up as a feature request…

                        1 Reply Last reply Reply Quote 0
                        • D
                          dsl101 last edited by

                          @rstoenescu Was https://github.com/quasarframework/quasar/commit/11f2e05146e1dfccb03504b36cfe84e3bd063863 designed to fix the warning that was generated in the console using this approach to ‘deselecting’ tabs? It seems to be still there in beta 21.

                          See original pen console: https://codepen.io/metalsadman/pen/zXyqyK

                          1 Reply Last reply Reply Quote 0
                          • First post
                            Last post