Vuetify: [Bug Report] Combobox add 2 items when pressing enter on a search item

[gotson]

Environment

Vuetify Version: 2.0.13
Vue Version: 2.6.10
Browsers: Chrome 76.0.3809.132
OS: Android 9, Windows

Steps to reproduce

• in the tags field, type g
• press the arrow down to select the first option Gaming
• press enter

Expected Behavior

1 chip is added: Gaming

Actual Behavior

2 chips are added: Gaming and g

Reproduction Link

https://codepen.io/gotson/pen/GRKOoeb

[sh7dm]

workaround: https://github.com/vuetifyjs/vuetify/issues/8842#issuecomment-528250028

[rcreynolds53]

Work around does not work for autocomplete

[sh7dm]

@rcreynolds53 could you provide a repro for that?

[rcreynolds53]

@sh7dm

So the steps I took to reproduce it

• Create a v-menu with an activation slot
• Put the v-autocomplete inside the content of the v-menu
  - Set the v-autocomplete to attached = true
  -press the arrow down to select an option
  press enter

Observe that the event fires twice

I was able to fix this by specifying that the :attached="False" on the v-autocomplete, now it only fires adds one of the items not two

[sh7dm]

@rcreynolds53 please open an issue, this seems to be a new bug.

[Nico264]

The workaround suggested in https://github.com/vuetifyjs/vuetify/issues/8842#issuecomment-528250028 stopped working starting for this with Vuetify 2.0.19 (2.0.18 vs 2.0.19).

The workaround still works for https://github.com/vuetifyjs/vuetify/issues/8842, but not for https://github.com/vuetifyjs/vuetify/issues/8841 anymore. The text field is still cleared, but too late, both input events already happened.

[lephuongbg]

@sh7dm Please kindly remove has workaround label as it is no longer applied.

[haggys22]

My findings for a real fix:

1. Type g, navigate to Gaming with arrow keys
2. Press enter
   
   
   
   • VCombobox.onKeyDown() (VCombobox:115)
   
   
   • The selected option is selected (i.e. Gaming)
     
     
     
     
     
     • VCombobox:118: VSelect.onKeyDown()
     
     
     
     • VSelect:621: VMenu.changeListIndex()
     
     
     
     • VMenu:254: VListItem.click()
     
     
     
     • VListItem:126: $emit('click')
     
     
     
     • VSelectList:175 (genTile(), VSelectList:149): $emit('select')
     
     
     
     • VCombobox:158 (selectItem("Gaming"), VCombobox:153): VAutocomplete.selectItem("Gaming")
     
     
     
     • VAutocomplete:347: VSelect.selectItem("Gaming")
     
     
     
     • VSelect:756: VCombobox.setValue(["Gaming"])
     
     
     
     • VCombobox:171: VSelect.setValue(["Gaming"])
     
     
     
     • VSelect:808: this.internalValue = ["Gaming"]
     
     
     
   
   
   • At this point: internalValue = ["Gaming"], searchValue = "g", internalSearch = "g", but selectedItems = [] and the input field still displays only g
     
     
     
     
     
     • VCombobox:128: VCombobox.onEnterDown()
     
     
     
     • VCombobox:104: $nextTick()
     
     
     
   
   
   • At this point: internalValue = ["Gaming"], searchValue = "g", internalSearch = "g", selectedItems = ["Gaming"] and the input field displays the Gaming chip and g
     
     
     
     
     
     • VComboBox:107: VCombobox.updateSelf()
     
     
     
     • VCombobox:197: VCombobox.updateTags()
     
     
     
   
   
   • Here the bad things start to happen (as internalSearch = "g")
     
     
     
     
     
     • VCombobox:229: VCombobox.selectItem("g")
     
     
     
     • VCombobox:158: VAutocomplete.selectItem("g")
     
     
     
     • VAutocomplete:347: VSelect.selectItem("g")
     
     
     
     • VSelect:756: VCombobox.setValue(["Gaming", "g"])
     
     
     
     • VCombobox:171: VSelect.setValue(["Gaming", "g"])
     
     
     
     • VSelect:808: this.internalValue = ["Gaming", "g"]
     
     
     
   
   

As soon as I find a proper way of resetting the searchValue/internalSearch without breaking anything I will create another PR

[haggys22]

I've found a solution to restore the behavior of vuetify 1.5.18 (see this fiddle: https://jsfiddle.net/wqb0cj28/), where after pressing enter only the selected menu item was added as a chip, but the search value was not cleared.

The workaround by manually resetting the search value also worked back then: https://jsfiddle.net/d90mpot2/

If this behavior is close enough to a fix i will create a PR tomorrow, otherwise I will further look for a solution which also resets the search value

PS: Opinions of @johnleider @nekosaur @sh7dm @jacekkarczmarczyk @MajesticPotatoe on this are very appreciated

[johnleider]

Duplicate of #6697

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