Combobox errors out with "Maximum recursive updates exceeded in component <Combobox>"

[ajuvonen]

Hi, I'll try to list all the needed details here, hoping someone could help. First the OS, browsers and dependencies, unrelevant ones have been omitted:

Windows 11
Firefox & Chrome @ latest

"dependencies": {
"@headlessui/vue": "^1.7.22",
"vue": "^3.5.0"
},
"devDependencies": {
"@tsconfig/node20": "^20.1.4",
"@types/jsdom": "^21.1.7",
"@types/node": "^22.5.3",
"@vitejs/plugin-vue": "^5.1.3",
"@vue/tsconfig": "^0.5.1",
"autoprefixer": "^10.4.20",
"jsdom": "^25.0.0",
"postcss": "^8.4.45",
"sass": "^1.78.0",
"tailwindcss": "^3.4.10",
"typescript": "^5.5.4",
"vite": "^5.4.3",
"vue-tsc": "^2.1.4"
},

So it's a Vue3 + TypeScript + Vite app with HeadlessUI and TailwindCSS. I'm experiencing issues with the Combobox, where if the list grows long and complicated enough, it errors out every time in the console:

Uncaught (in promise) Maximum recursive updates exceeded in component <Combobox>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

I've spent the day debugging my app, trying to find where such effect could be occurring. Then I created a new testing component from scratch using the HeadlessUI example as base, and experience the same problem. With 500 items, the list takes multiple seconds to open and eventually the error is thrown. I'll paste the testing component code here, but I don't have a repro in Codesandbox or similar.

<script setup lang="ts">
import {ref, computed} from 'vue';
import {
  Combobox,
  ComboboxInput,
  ComboboxButton,
  ComboboxOptions,
  ComboboxOption,
  TransitionRoot,
} from '@headlessui/vue';

const people = [...Array(500)].map((_, i) => ({
  id: i,
  name: `Person ${i + 1}`,
}));

console.log(people);
const selected = ref(null);
const query = ref('');

const filteredPeople = computed(() =>
  query.value === ''
    ? people
    : people.filter((person) =>
        person.name
          .toLowerCase()
          .replace(/\s+/g, '')
          .includes(query.value.toLowerCase().replace(/\s+/g, '')),
      ),
);
</script>

<template>
  <div class="fixed top-16 w-72">
    <Combobox v-model="selected">
      <div class="relative mt-1">
        <div
          class="relative w-full cursor-default overflow-hidden rounded-lg bg-white text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm"
        >
          <ComboboxInput
            class="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
            :displayValue="(person: any) => person?.name"
            @change="query = $event.target.value"
          />
          <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
            V
          </ComboboxButton>
        </div>
        <TransitionRoot
          leave="transition ease-in duration-100"
          leaveFrom="opacity-100"
          leaveTo="opacity-0"
          @after-leave="query = ''"
        >
          <ComboboxOptions
            class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm"
            :unmount="false"
          >
            <div
              v-if="filteredPeople.length === 0 && query !== ''"
              class="relative cursor-default select-none px-4 py-2 text-gray-700"
            >
              Nothing found.
            </div>

            <ComboboxOption
              v-for="person in filteredPeople"
              as="template"
              :key="person.id"
              :value="person"
              v-slot="{selected, active}"
            >
              <li
                class="relative cursor-default select-none py-2 pl-10 pr-4"
                :class="{
                  'bg-teal-600 text-white': active,
                  'text-gray-900': !active,
                }"
              >
                <span
                  class="block truncate"
                  :class="{'font-medium': selected, 'font-normal': !selected}"
                >
                  {{ person.name }}
                </span>
                <span
                  v-if="selected"
                  class="absolute inset-y-0 left-0 flex items-center pl-3"
                  :class="{'text-white': active, 'text-teal-600': !active}"
                >
                  X
                </span>
              </li>
            </ComboboxOption>
          </ComboboxOptions>
        </TransitionRoot>
      </div>
    </Combobox>
  </div>
</template>

[ajuvonen]

Turned into an issue: #3455