Listbox flickering/snapping around when new selection is made

[IsaacCloos]

What component (if applicable)

• URL for category: https://catalyst.tailwindui.com/docs/listbox
• Component name: Listbox

Describe the bug
When a user is changing their selection in a <Listbox /> the popup repositions itself quickly before fading away.

To Reproduce
React Router 7.9.2 project, here's a MVP code snippet.

import { Divider } from '@/components/catalyst/divider'
import { Field, Label } from '@/components/catalyst/fieldset'
import { Heading } from '@/components/catalyst/heading'
import { Listbox, ListboxLabel, ListboxOption } from '@/components/catalyst/listbox'

const items = [
	{ id: 1, name: 'Release 1.0' },
	{ id: 2, name: 'Release 1.1' },
	{ id: 3, name: 'Release 2.0' },
	{ id: 4, name: 'Release 2.1' },
	{ id: 5, name: 'Release 3.0' }
]

export default function ExamplePage() {
	return (
		<>
			<Heading>Example Page</Heading>
			<Divider className='mt-6 mb-8' />
			<Field>
				<Label>Lisbox MVP</Label>
				<Listbox defaultValue={3}>
					{items.map((item) => (
						<ListboxOption
							key={item.id}
							value={item.id}
						>
							<ListboxLabel>{item.name}</ListboxLabel>
						</ListboxOption>
					))}
				</Listbox>
			</Field>
		</>
	)
}

Behaves like this:

Expected behavior
I recorded how the doc site works (which is very nice):

Browser/Device (if applicable)

• OS: Windows 11
• Browser: chrome
• Version: 140.0.7339.186

Additional context
I am using the latest version of catalyst (downloaded this morning).

Thanks for the help! If I'm using the component wrong sorry for the hassle 🙂

[RobinMalfait]

Hey!

This was an issue in the underlying Headless UI library. We just released a new version, so if you bump it (npm install @headlessui/react@latest) then this should work as expected again.