Popover: Toggling doesn't work when using a custom component button

[piotrjoniec]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

v1.7.16 (Problem starts at v1.7.14)

What browser are you using?

Chrome

Reproduction URL

https://codesandbox.io/p/sandbox/eloquent-snow-lqyj4z?file=%2Fsrc%2FApp.vue%3A1%2C1

Describe your issue

1. Clicking on "Normal button" multiple times will toggle the "Normal button panel". This is correct.
2. Clicking on "Component button" multiple times will show "Component button panel" and it will stay open without toggling.

The reason why it happens is clicking on the component-based button triggers the useOutsideClick callback.

headlessui/packages/@headlessui-vue/src/components/popover/popover.ts

Lines 247 to 259 in 24486b3

	// Handle outside click
	useOutsideClick(
	root.resolveContainers,
	(event, target) => {
	api.closePopover()
	if (!isFocusableElement(target, FocusableMode.Loose)) {
	event.preventDefault()
	dom(button)?.focus()
	}
	},
	computed(() => popoverState.value === PopoverStates.Open)
	)

[thecrypticace]

Hey! So this was fixed a while back in #2715 but it's not yet in a tagged release. We've got a bit of work on headless ui and other stuff going on at the moment so I'm not certain when we'll tag another patch. In the meantime you can use our insiders build:

npm install @headlessui/vue@insiders