Combobox throws "Maximum recursive updates exceeded" error in Vue

[ajuvonen]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

1.7.22

What browser are you using?

Firefox 129, Chrome 128

Reproduction URL

Stackblitz.

Describe your issue

With enough data, opening a Combobox takes several seconds to open and eventually errors out with the following error:

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.

Oddly enough the error doesn't occur if you type in the combobox in certain ways, but when you clear your input, opening the full list again errors.

The Stackblitz fork is a Vite + Vue starter with basically everything else taken off, and the Combobox implementation follows the HeadlessUI example, with the exception of its data generation and it being a nullable multiple selection.

[ajuvonen]

This seems to start occurring after Vue 3.5.0, still works with 3.4.38.

[miguelrk]

I can confirm I'm having this error as well after upgrading to vue 3.5.0

[RobinMalfait]

Hey!

This seems to be an issue with vue itself. If you install the latest version (3.5.2) it starts working again as expected 👍

Hope this helps!

[miguelrk]

Hey @RobinMalfait, thanks for your answer! How would I install vue version "3.5.2" for nuxt@3.13.1? Is it simply npm install vue@^3.5.2 for nuxt to use that locally installed version?

[timotheeduran]

Hey @RobinMalfait, thanks for your answer! How would I install vue version "3.5.2" for nuxt@3.13.1? Is it simply npm install vue@^3.5.2 for nuxt to use that locally installed version?

Hey @miguelrk. Did you manage to do this?

[RobinMalfait]

@miguelrk @timotheeduran Nuxt relies on "vue": "^3.5.0", in the package.json, which means that an npm install or npm update should do the trick already.

You can run npm ls vue to see which version of Vue is installed.

[patriktoth67]

Sadly it didn't solve the issue for me, after npm ls vue I see that v3.5.6 is installed but still get the error with most popover elements.

I tried it with v3.5.2 as well, still the same issue.

[attac-t]

Sadly it didn't solve the issue for me, after npm ls vue I see that v3.5.6 is installed but still get the error with most popover elements.

I tried it with v3.5.2 as well, still the same issue.

@patriktoth67 check whether you're setting the value prop of the ComboboxOption like this :value="{value: null, label: query}. If so, move the field to a computed value or so.