@change does not work with Combobox (VueJs)

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

v1.5.0

What browser are you using?

Chrome

Reproduction URL

A public GitHub repo that includes a minimal reproduction of the bug. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn’t matter if your real project is private/confidential, since we want a link to a separate, isolated reproduction anyways. Unfortunately we can’t provide support without a reproduction, and your issue will be closed with no comment if this is not provided.

Describe your issue

<Combobox
     v-model="selectedPerson"
     @change="window.location.href = selectedPerson.url"
     as="div"
>
          <ComboboxInput  
                    placeholder="Search..."
                    @change="query = $event.target.value"
                    :displayValue="(person) => person.name"
          />
          <ComboboxOptions
                     static
                              >
                    <ComboboxOption
                               v-slot="{ active }"
                               v-for="person in filteredPeople"
                               :disabled="person.unavailable"
                              :key="person.id"
                               :value="person"
                                            >
                    </ComboboxOption>
          </ComboboxOptions>

<Combobox/>

When there are actions like click or enter to the ComboxOption, the value in v-model="selectedPerson" changed,. I used @change to catch all those changes and redirect the window to the respective URL

But it does not seem to be working, nothing happened after clicking or entering

Before clicking or entering

Afterclicking or entering

[thecrypticace]

In Vue we use v-model instead of custom props and events. To react to changes without using computed, watch, etc… you need to use the same event used by v-model: update:modelValue.

Which, means the code above should be written as:

<Combobox
  v-model="selectedPerson"
  @update:modelValue="window.location.href = selectedPerson.url"
  as="div"
>
  …
</Combobox>

Link: https://stackblitz.com/edit/vue-sv3ctl

Aside:

1. @adamwathan apparently console.count() doesn’t work on StackBlitz console.
2. Should we add a change event just to more closely match the API of the React component? It’s not idiomatic Vue but it might still be a better DX.

[jameswong3388]

@thecrypticace Not sure if there is a way to display activeOption in the ComboboxInput?