Vuetify: [Bug Report] v-select with chips and box/outline props: clicking the chip or the remove icon opens the selection menu

Created on 25 Oct 2018  路  8Comments  路  Source: vuetifyjs/vuetify

Versions and Environment

Vuetify: 1.3.2
Vue: 2.5.17
Browsers: Chrome 68.0.3440.84
OS: Windows 10

Steps to reproduce

Make a v-select. Add props 'chips', and 'box' or 'outline'. Select an option. Close the menu. Click the selection chip (or the remove icon if deletable).

Expected Behavior

Clicking the chip highlights the chip. Clicking the remove icon deletes the selection. The selection menu stays closed.

Actual Behavior

Clicking the chip highlights the chip and opens the selection menu. Clicking the remove icon removes the chip and opens the selection menu

Reproduction Link

https://codepen.io/anon/pen/EdGNyg?editors=1011

Other comments

The same thing happens with the v-combobox as expected. My example uses multiple selection but the same thing happens with single selection. My current workaround is to add 'class="v-text-field--enclosed v-text-field--outline" to v-select.

VSelect bug

Most helpful comment

I'm experiencing a similar problem in 2.1.14.

outlined V-select with a selection slot and defined chip component. @click:close on the chip opens the select menu.

@sh7dm

All 8 comments

Any news on this. adding the class does not prevent dropdown for me.

I can't see this in v2.0.0-beta.2

This is still an issue with current version, when clicking the close button of the chip :(

ANy news on this ?

I'm experiencing a similar problem in 2.1.14.

outlined V-select with a selection slot and defined chip component. @click:close on the chip opens the select menu.

@sh7dm

@KaelWD @johnleider Should we have this reopened? The issue is still present in 2.1.15.

Relevant sample from inside a v-select with the outlined attribute:

        <template v-slot:selection="{ item, index }">
            <v-chip
                close
                @click:close="removeChip(item,mutableSelection)"
            >
                <span>item</span>
            </v-chip>
        </template>

This is defenitely still an issue

We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or reach out to us in our Discord community.

Thank you for your contribution and interest in improving Vuetify.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

gluons picture gluons  路  3Comments

SteffenDE picture SteffenDE  路  3Comments

dschreij picture dschreij  路  3Comments

paladin2005 picture paladin2005  路  3Comments

ricardovanlaarhoven picture ricardovanlaarhoven  路  3Comments