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] Combobox add 2 items when pressing enter on a search item #8841

Closed
gotson opened this issue Sep 4, 2019 · 10 comments · Fixed by #9866
Closed

[Bug Report] Combobox add 2 items when pressing enter on a search item #8841

gotson opened this issue Sep 4, 2019 · 10 comments · Fixed by #9866
Assignees
Labels
C: VCombobox VCombobox duplicate The issue has already been reported T: bug Functionality that does not work as intended/expected

Comments

@gotson
Copy link

gotson commented Sep 4, 2019

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

@ghost ghost added the S: triage label Sep 4, 2019
@dsseng dsseng added C: VCombobox VCombobox T: bug Functionality that does not work as intended/expected has workaround and removed S: triage labels Sep 8, 2019
@dsseng
Copy link
Contributor

dsseng commented Sep 8, 2019

workaround: #8842 (comment)

@rcreynolds53
Copy link

Work around does not work for autocomplete

@dsseng
Copy link
Contributor

dsseng commented Sep 18, 2019

@rcreynolds53 could you provide a repro for that?

@rcreynolds53
Copy link

@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

@dsseng
Copy link
Contributor

dsseng commented Sep 19, 2019

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

@nicolas-guichard
Copy link

The workaround suggested in #8842 (comment) stopped working starting for this with Vuetify 2.0.19 (2.0.18 vs 2.0.19).

The workaround still works for #8842, but not for #8841 anymore. The text field is still cleared, but too late, both input events already happened.

@lephuongbg
Copy link
Contributor

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

@haggys22
Copy link
Contributor

haggys22 commented Dec 5, 2019

My findings for a real fix:

  1. Type g, navigate to Gaming with arrow keys
  2. Press enter
    • VCombobox.onKeyDown() (VCombobox:115)
    1. 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"]
    2. 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()
    3. 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()
    4. 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
Copy link
Contributor

haggys22 commented Dec 5, 2019

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
Copy link
Member

Duplicate of #6697

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 Jan 16, 2020
@johnleider johnleider self-assigned this Jan 16, 2020
johnleider pushed a commit that referenced this issue Jan 20, 2020
…eyboard (#9866)

fixes #6697

* Fix #8841

* Fix indentation

* Remove duplicate line of code

* Fix VSelect test

After triggering `click` the `VMenu` needs one tick to activate, therefore the `keydown.down` event during the same tick will be passed to the still inactive menu und not update the `listIndex`.

Waiting for the next tick fixes this as the menu will be active afterwards

* Prevent VCombobox selection by keyboard from triggering twice

* Revert "Fix VSelect test"

This reverts commit 86fefaa.

* style(VCombobox): Pass `updateSelf` to `$nextTick` instead of arrow function

This was suggested by @jacekkarczmarczyk ([comment](https://github.com/vuetifyjs/vuetify/pull/9866/files/ba3f8a40b327e7509272530fe40ffe726f016a02#r359313120))

* test(VCombobox): Add test case for changes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VCombobox VCombobox duplicate The issue has already been reported T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants