[Vue] Wrong active item on arrow down

[mochetts]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

(latest) 1.7.23

What browser are you using?

Chrome

Reproduction URL

https://codesandbox.io/p/devbox/pedantic-sun-4hc3z7?workspaceId=ws_5oYAKSQKqDxCALy5zXrTYs

Describe your issue

In the combobox component, when there's no active item and I press the arrow key down I get the second item activated instead of the first one.

Screen.Recording.2025-08-23.at.5.59.23.PM.mov

Repro steps:

• Open the reporduction url
• Run the "preview" task.
• Open the dropdown
• Blur the first active item so that there's no active item
• Press arrow down
• You'll see it activates the second item instead of the first one

[mochetts]

If anyone's wondering how to workaround this, here's what I did:

1. Add a ref to your combobox:

<Combobox ref="comboboxRef">
...
</Combobox>

2. Add a keydown handler to your ComboboxInput:

<Combobox ref="comboboxRef">
  <ComboboxInput
    @keydown.down.prevent.stop="onArrowDownPressed"
  />
</Combobox>

3. Make the handler reset the active index:

<script setup lang="ts">
  // Reset active index to be 0 if arrow key down is pressed 
  // and the activeIndex is null
  function onArrowDownPressed () {
    const contextKey = Object.getOwnPropertySymbols(comboboxRef.$.provides)[0]
    const context = comboboxRef.$.provides[contextKey]
    if (context.activeOptionIndex.value === null) {
      // 4 = Specific index, index 0
      // see https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-vue/src/utils/calculate-active-index.ts#L19
      context.goToOption(4, 0)
    }
  }
<script>

<template>
  <Combobox ref="comboboxRef">
    <ComboboxInput
      @keydown.down.prevent.stop="onArrowDownPressed"
    />
  </Combobox>
</template>

Beware that this is very nasty: const contextKey = Object.getOwnPropertySymbols(comboboxRef.$.provides)[0].
We're not supposed to access the comobox context this way. There's a reason why the maintainers made the context key private.