Skip to content

[Bug Report] Inconsistent Behaviour when using v-combobox with keyboard #12567

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

Closed
stefanKuijers opened this issue Nov 6, 2020 · 2 comments · Fixed by #13825
Closed

[Bug Report] Inconsistent Behaviour when using v-combobox with keyboard #12567

stefanKuijers opened this issue Nov 6, 2020 · 2 comments · Fixed by #13825
Assignees
Labels
C: VSelect T: bug Functionality that does not work as intended/expected
Milestone

Comments

@stefanKuijers
Copy link

Environment

Vuetify Version: 2.3.16
Vue Version: 3.0.2
Browsers: Chrome 86.0.4240.183
OS: Mac OS 10.15.7

Steps to reproduce

  1. Select the first item in the list by clicking it. As Expected.
  2. Open the combobox again by clicking in it and select the second item. As Expected.
  3. Now hit the enter key, it will open the combobox. As Expected.
  4. Hit enter again which keeps the current item selected and closes the combobox. As Expected.
  5. Hit the enter key again how ever many times you like, the combobox does not open. Not as expected.
  6. Click on the combobox and open the third item from the list. The combobox closes. As Expected
  7. Hit enter. This will not open the combobox but switch your selection back to your previous selected item. Not as expected.
  8. With enter toggle to your previous selection (second item). Open the combobox and select the fourth item in the list. Combobox closes as expected.
  9. Keep hitting enter and you will see that it toggles between the third and the fourth item. Even though you selected the second item in the list before. REally not as expected.

I'm quite sure point eight and nine won't happen once the enter->toggle problem is fixed.

You can check it in the samples as well.
https://vuetifyjs.com/en/components/combobox/#usage

Expected Behavior

Step 5

I would expect the combobox to toggle its open state on hitting the enter key.

Step 7

I expect the combobox to open when it has focus and I hit enter.

Step 9

I would expect the combobox to open when it has focus and I hit enter.

Actual Behavior

Step 5

Instead of opening the combobox it does nothing.

Step 7

Instead of opening the combobox it start toggeling between my current and previous selection.

Step 9

Instead of opening the combobox it start toggeling between my current and before previous selection.

Reproduction Link

https://codepen.io/stefanKuijers/pen/KKMxgMY

Other comments

As many users of our application use it with the keyboard these issues are pretty confusing for them.

Thank you guys so much for Vuetify. It's awesome!

@mariobuikhuizen
Copy link

Something similar happens for v-select. Opening the select with enter only works one time. Observed in v2.2.26 and v2.3.16 in the example page https://vuetifyjs.com/en/components/selects/

@stefanKuijers

This comment has been minimized.

@johnleider johnleider added C: VSelect T: bug Functionality that does not work as intended/expected and removed S: triage labels Jan 11, 2021
@johnleider johnleider added this to the v2.4.x milestone Jan 11, 2021
@KaelWD KaelWD modified the milestones: v2.4.x, v2.5.x May 11, 2021
@KaelWD KaelWD self-assigned this Jun 19, 2021
johnleider pushed a commit that referenced this issue Jun 28, 2021

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
fixes #12567
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VSelect T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants