q-select how to close when not in focus

[darkshifty]

I’m trying to work with Q-Select the end user requested it to close when the mouse isn’t on the select or dropdown. What is the best way to archieve this Quasar wise?

[felek]

I think there is method called hidePopup. You will have to implement event listener mouse leave and then hidePopup.

[dobbel]

by using a ref on the q-select you can call the hidePopup method.

[darkshifty]

Yeah this is exactly the problem, i can only set the mouse leave to the select element. The function isn’t attached to the options.

<q-select standout="bg-red text-white"
          bg-color="white"
          class="q-pa-xs"
          square
          dense
          v-model="category"
          v-on:mouseleave.native="doSomething"
          :options="categoryOptions"
          label="Catalog" />

so once the user goes out of the select area (to select an option) mouse leave is fired. However, I wish to close the dropdown once the mouse leaves the selectbox and options.

[dobbel]

@darkshifty

Ajh yes I understand what you are trying to do, I will think about a solution.

But from experience I can tell that this behavior is VERY annoying (and uncommon), because if the user will just slightly get out of bounds of the expanded options or select the whole select will close unexpectedly.

[darkshifty]

I agree, sadly the business wants this so I have to jump some loops. I will have a look at q-menu, maybe I can emulate the same with the desired behaviour.

Dankjewel

[metalsadman]

@darkshifty try using the option slot and inhibit the event there, but yeah I could see qmenu doing just as well, qselect’s options is a qmenu + qlist/qitems under the hood.

[darkshifty]

@metalsadman thank you, that is a great solution! for reference, I’ve created the following:

methods: {
    mouseEnter() {
        this.mouseLeft = false
    },
    mouseLeave() {
        this.mouseLeft = true
        setTimeout(() => {
            if (this.mouseLeft) {
                this.$refs.categorySelect.hidePopup()
                this.$refs.categorySelect.focused = false
            }
        }, 200);
    }
},

<q-select standout="bg-red text-white"
          ref="categorySelect"
          bg-color="white"
          class="q-pa-xs"
          square
          dense
          v-model="category"
          :options="definitions.categoryOptions"
          label="Catalogus">
    <template v-slot:option="{ itemProps, itemEvents, opt, selected, toggleOption }">
        <q-item v-bind="itemProps"
                v-on="itemEvents"
                @mouseenter="mouseEnter"
                @mouseleave="mouseLeave">
            <q-item-section>
                <q-item-label v-html="opt"></q-item-label>
            </q-item-section>
        </q-item>
    </template>
</q-select>