Listbox throws exception inside <label>

[ju5t]

Whenever you wrap the headless listbox demo code inside a <label> element, the following errors appear:

app-kbkhAhP-.js:11 Uncaught (in promise) {isFromCancelledTransition: true}
(anonymous) @ app-kbkhAhP-.js:11
(anonymous) @ app-kbkhAhP-.js:11
(anonymous) @ app-kbkhAhP-.js:11
Oi @ app-kbkhAhP-.js:11
in @ app-kbkhAhP-.js:11
window.Element._x_toggleAndCascadeWithTransitions @ app-kbkhAhP-.js:11
(anonymous) @ app-kbkhAhP-.js:11
(anonymous) @ app-kbkhAhP-.js:11
(anonymous) @ app-kbkhAhP-.js:11
je @ app-kbkhAhP-.js:11
(anonymous) @ app-kbkhAhP-.js:11
yi @ app-kbkhAhP-.js:7
(anonymous) @ app-kbkhAhP-.js:11
j @ app-kbkhAhP-.js:7
we @ app-kbkhAhP-.js:7
app-kbkhAhP-.js:11 Uncaught (in promise) TypeError: Le is not a function
    at app-kbkhAhP-.js:11:7997
(anonymous) @ app-kbkhAhP-.js:11
Promise.catch (async)
(anonymous) @ app-kbkhAhP-.js:11
requestAnimationFrame (async)
(anonymous) @ app-kbkhAhP-.js:11

The first error appears is caused by x-transition.origin.top.right. I don't know why, but removing it clears it. The second error I don't know. JavaScript is not my strong point unfortunately. Both only show up when you wrap it in a <label> element. As soon as you replace it for a div, things work just fine.

I'm not seeing this behaviour for the combobox by the way.

Ps. thanks for your efforts on the headless components, awesome stuff!

[SimoTod]

That is your browser trying to fix invalid html and moving element outside of the label tag so whe alpine runs, yourhtml is all mixed up. A label can only contain text nodes and inline elements

[ju5t]

@SimoTod thanks! I didn't know that. I also checked why I didn't have any issues with the combobox. Turns out it's related to the button that's used in the listbox. When I switch that to a div with role="button" it doesn't throw the errors. Obviously we should change the behaviour though so I'll refactor things.

Thanks again!