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.

Sign up for GitHub

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

Jump to bottom

[Bug Report][3.2.2] V-autocomplete menu selection not closing by clicking arrow icon #17280

Closed
ngobinh105 opened this issue May 3, 2023 · 1 comment
Closed

[Bug Report][3.2.2] V-autocomplete menu selection not closing by clicking arrow icon #17280

ngobinh105 opened this issue May 3, 2023 · 1 comment
Assignees
@yuwu9145 @KaelWD
Labels
C: VAutocomplete VAutocomplete C: VCombobox VCombobox T: bug Functionality that does not work as intended/expected
Milestone
v3.3.0 (Icarus)

Comments

@ngobinh105
Copy link

Environment

Vuetify Version: 3.2.2
Last working version: 2.6.11
Vue Version: 3.2.27
Browsers: Chrome 112.0.0.0
OS: Mac OS 10.15.7

Steps to reproduce

cannot close input selection, only work when click outside or 'esc'

Expected Behavior

clicking arrow will open & close the input selection

Actual Behavior

only opening the menu but not closing it

Reproduction Link

https://play.vuetifyjs.com/#...
@yuwu9145 yuwu9145 self-assigned this May 4, 2023
@yuwu9145 yuwu9145 added T: bug Functionality that does not work as intended/expected C: VCombobox VCombobox C: VAutocomplete VAutocomplete and removed S: triage labels May 4, 2023
yuwu9145 added a commit that referenced this issue May 11, 2023
@yuwu9145
fix(VField): prevent mousedown fall through to root
1627ed8 
fixes #17280
@yuwu9145 yuwu9145 mentioned this issue May 11, 2023
Closed
yuwu9145 added a commit that referenced this issue May 13, 2023
@yuwu9145
fix(VField): prevent mousedown fall through to root
6727c49 
fixes #17280

use clickOutside from vueuse to manually trigger blur
@yuwu9145
Copy link
Member

yuwu9145 commented May 14, 2023 •
edited

As per my investigation, fixing this would require bit refactoring, because:

In VTextField, due to input has onBlur={ blur }, clicking appendInnerIcon will blur input, which means clicking the arrow icon will have to blur the whole VTextField.

My refactoring plan:

  • Remove onBlur={ blur } from input
  • Port corresponding V2 logic (manually trigger blur in VTextField via "click outside" or "keydown tab") to V3

Do you have any better suggestions @vuetifyjs/core-team ?

@KaelWD KaelWD self-assigned this May 15, 2023
@KaelWD KaelWD added this to the v3.3.0 (Icarus) milestone May 15, 2023
KaelWD added a commit that referenced this issue May 15, 2023
@KaelWD
fix(VCombobox): close menu on icon mousedown
3d91fe7 
fixes #17280
closes #17355
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@yuwu9145 yuwu9145

@KaelWD KaelWD

Labels
C: VAutocomplete VAutocomplete C: VCombobox VCombobox T: bug Functionality that does not work as intended/expected
Projects
None yet
Milestone
v3.3.0 (Icarus)
Development

Successfully merging a pull request may close this issue.

fix(VField): prevent mousedown fall through to root vuetifyjs/vuetify
3 participants
@yuwu9145 @KaelWD @ngobinh105