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

Ensure blurring the Combobox.Input component closes the Combobox #2712

Merged
merged 3 commits into from
Aug 29, 2023
Merged
Changes from 1 commit
Commits
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
Prev Previous commit
select the value on blur if we are in single value mode
RobinMalfait committed Aug 29, 2023
commit b6e0978deea9ed1832e4931da7d54c3e4a0dbac3
Original file line number Diff line number Diff line change
@@ -1035,15 +1035,20 @@ function InputFn<
if (data.comboboxState !== ComboboxState.Open) return
event.preventDefault()

if (data.nullable && data.mode === ValueMode.Single) {
if (data.mode === 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 (data.value === null) {
if (data.nullable && data.value === null) {
clear()
}

// We do have a value, so let's select the active option
else {
actions.selectActiveOption()
}
}

return actions.closeCombobox()
9 changes: 7 additions & 2 deletions packages/@headlessui-vue/src/components/combobox/combobox.ts
Original file line number Diff line number Diff line change
@@ -1002,15 +1002,20 @@ export let ComboboxInput = defineComponent({
if (api.comboboxState.value !== ComboboxStates.Open) return
event.preventDefault()

if (api.nullable.value && api.mode.value === ValueMode.Single) {
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.value.value === null) {
if (api.nullable.value && api.value.value === null) {
clear()
}

// We do have a value, so let's select the active option
else {
api.selectActiveOption()
}
}

return api.closeCombobox()