Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report] v-autocomplete opens when clicking close icon of v-chip in selection slot #11824

Closed
starkfree opened this issue Jul 9, 2020 · 1 comment · Fixed by #12343
Closed
Labels
duplicate The issue has already been reported

Comments

@starkfree
Copy link

Environment

Vuetify Version: 2.3.4
Vue Version: 2.6.11
Browsers: Firefox 79.0, Google Chrome
OS: Windows 10

Steps to reproduce

  1. Find the select box in the codepen (identical to the example shown under slots on this page in the documentation (https://vuetifyjs.com/en/components/autocompletes/#slots). The version shown is the filled variant of the v-autocomplete.

  2. Click the x icon for the v-chip for Britta Holt, the menu will incorrectly open as well as the chip will be removed (expected). This is likely due to the click:close event propagating into the v-autocomplete triggering a menu opening.

  3. Scroll to line 95 in the HTML side of the codepen, change filled to solo or outlined and you will experience the same issue when removing Britta Holt (or any other chip)

  4. Scroll to line 95 in the HTML side of the codepen, remove filled (or solo/outlined) and it will revert to the standard variant of the v-autocomplete. Click the x on Britta Holt now and you will notice that in this variant, the menu does not open.

Expected Behavior

I would expect that clicking the close button on a customized v-chip, modified via the correct v-slot:selection functionality, would only remove the chip and nothing else in the solo, outlined, and filled variants, just like it does in the standard variant.

Actual Behavior

On the three custom variants of the v-autocomplete (solo, outlined, filled), clicking the close button on a customized v-chip, causes the menu to open.

Reproduction Link

https://codepen.io/starkfree/pen/zYrjWGN?editable=true&editors=101%3Dhttps%3A%2F%2Fvuetifyjs.com%2Fen%2Fcomponents%2Fautocompletes%2F

Other comments

This only seems to happen if you customize the v-chip layout via the v-slot:selection. If you simply use the built in v-chip layouts, it works as expected.

@ghost ghost added the S: triage label Jul 9, 2020
@starkfree starkfree changed the title [Bug Report] Clicking the 'close' icon on a customized v-chip within an v-autocomplete will open the dropdown menu when using the filled, solo, and outlined variants (will work as expected in the standard variant) [Bug Report] Clicking the 'close' icon on a customized v-chip within a v-autocomplete will open the dropdown menu when using the filled, solo, and outlined variants (will work as expected in the standard variant) Jul 9, 2020
@nekosaur nekosaur added C: VAutocomplete VAutocomplete C: VSelect VSelect T: bug Functionality that does not work as intended/expected and removed S: triage labels Sep 30, 2020
@nekosaur nekosaur changed the title [Bug Report] Clicking the 'close' icon on a customized v-chip within a v-autocomplete will open the dropdown menu when using the filled, solo, and outlined variants (will work as expected in the standard variant) [Bug Report] v-autocomplete opens when clicking close icon of v-chip in selection slot Sep 30, 2020
@nekosaur nekosaur self-assigned this Sep 30, 2020
nekosaur added a commit that referenced this issue Oct 3, 2020
clicking on a selection item (for example the close icon of a v-chip) would cause menu to open if component was using filled/outlined/solo

closes #11824
@johnleider
Copy link
Member

duplicate of #10774

If you have any additional questions, please reach out to us in our Discord community.

@johnleider johnleider added the duplicate The issue has already been reported label Oct 7, 2020
@KaelWD KaelWD removed C: VAutocomplete VAutocomplete C: VSelect VSelect T: bug Functionality that does not work as intended/expected labels Oct 7, 2020
johnleider pushed a commit that referenced this issue Oct 7, 2020
clicking on a selection item (for example the close icon of a v-chip) would cause menu to open if component was using filled/outlined/solo

fixes #11824
jyburns pushed a commit to jyburns/vuetify that referenced this issue Oct 11, 2020
…js#12343)

clicking on a selection item (for example the close icon of a v-chip) would cause menu to open if component was using filled/outlined/solo

fixes vuetifyjs#11824
jyburns pushed a commit to jyburns/vuetify that referenced this issue Oct 11, 2020
…js#12343)

clicking on a selection item (for example the close icon of a v-chip) would cause menu to open if component was using filled/outlined/solo

fixes vuetifyjs#11824
francois2metz pushed a commit to francois2metz/vuetify that referenced this issue Oct 15, 2020
…js#12343)

clicking on a selection item (for example the close icon of a v-chip) would cause menu to open if component was using filled/outlined/solo

fixes vuetifyjs#11824
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
duplicate The issue has already been reported
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants