Skip to content

Blurring the combobox input sets the active option as selected #3771

@mochetts

Description

@mochetts

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

latest

What browser are you using?

Chrome

Reproduction URL

https://codesandbox.io/p/devbox/thirsty-glitter-9gdtjq

Describe your issue

When blurring the combobox input, the combox autoselects the active option.

This is problematic as the user intention is not to set an option, but to leave it empty.

  • Open the above link
  • Click on the combox trigger button to open the options
  • Blur the combobox
  • See how the first option is now selected
Screen.Recording.2025-08-01.at.10.04.32.AM.mov

Problematic code:
https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-vue/src/components/combobox/combobox.ts#L1244-L1246

This wasn't happening in 1.7.13 and is causing a good amount of friction in our codebase to overcome this issue: we need to pass the multiple prop to single select comboboxes, and treat the selected model value as an array of a single value just to avoid this code.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions