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

Fixes combobox selecting active option on blur #3628

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+8 −16
Open

Fixes combobox selecting active option on blur #3628

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 8 additions & 16 deletions packages/@headlessui-vue/src/components/combobox/combobox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1225,23 +1225,15 @@ export let ComboboxInput = defineComponent({
if (api.comboboxState.value !== ComboboxStates.Open) return
event.preventDefault()

if (api.mode.value === ValueMode.Single) {
// We want to clear the value when the user presses escape if and only if the current
// value is not set (aka, they didn't select anything yet, or they cleared the input which
// caused the value to be set to `null`). If the current value is set, then we want to
// fallback to that value when we press escape (this part is handled in the watcher that
// syncs the value with the input field again).
if (api.nullable.value && api.value.value === null) {
clear()
}

// We do have a value, so let's select the active option, unless we were just going through
// the form and we opened it due to the focus event.
else if (api.activationTrigger.value !== ActivationTrigger.Focus) {
api.selectActiveOption()
}
// We want to clear the value when the user presses escape if and only if the current
// value is not set (aka, they didn't select anything yet, or they cleared the input which
// caused the value to be set to `null`). If the current value is set, then we want to
// fallback to that value when we press escape (this part is handled in the watcher that
// syncs the value with the input field again).
if (api.nullable.value && api.value.value === null) {
clear()
}

return api.closeCombobox()
}

Expand Down