Using custom component as child of RadioGroupOption causes exception: TypeError: o.compareDocumentPosition is not a function

[paulcwatts]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

v1.7.12

What browser are you using?

Chrome

Reproduction URL

https://play.vuejs.org/#eNqtU8tOwzAQ/BVrL4DUxmovSCWtWi4ICQmJsy9u4lKDX8o6uVT5d+ykbZz0hOAWz+xMZr3eE+ycy5pawApyL7RT3IsNM4TkH7yU9qWytSPNXNtSqDUDLTQDUiiOGE9+vmTQlY8E785LawiPNRfTIGu4qkWA+FUzUr2G0is+Yt74XqjeDh03Qb7L6YQeHBMmsUzhPt+vc+//nvv5v3KncABymgwvHLGopPMEhe9oqZ2tPDmRShxISw6V1eQuTP3uKeEGw1ny3YVMgfMlXVy2R8FLJRBrSceO43b6cgbZpM34+BgEFTOFNehJeGJkHYPeP8S++k42MIPedq65y77QmvBiT/Em2JlABivSIRGbxIocg6P3DleU1sZ9f2aF1XRStl1kj9liSUuJng5UJlCHfzKI7i0zbUhz28XtCpWyue7KwdphVVBZT89zDEXjAUL7A523Ns8=

Describe your issue

I was trying to create a custom component to implement the Small cards Radio group components in Tailwind UI. That depends on a <div> child of RadioGroupOption which a bunch of custom styling. However, when I replace that <div> with a custom component to encapsulate that styling, I get the error:

TypeError: o.compareDocumentPosition is not a function
    at VM65 focus-management.js:1:1381
    at Array.sort (<anonymous>)
    at O (VM65 focus-management.js:1:1311)
    at Object.registerOption (VM49 radio-group.js:1:2321)
    at VM49 radio-group.js:1:4465
    at VM38 vue.runtime.esm-browser.js:4023:88
    at callWithErrorHandling (VM38 vue.runtime.esm-browser.js:1563:18)
    at callWithAsyncErrorHandling (VM38 vue.runtime.esm-browser.js:1571:17)
    at hook.__weh.hook.__weh (VM38 vue.runtime.esm-browser.js:4003:19)
    at flushPostFlushCbs (VM38 vue.runtime.esm-browser.js:1728:41)

[RobinMalfait]

Hey, thank you for this bug report! 🙏

This should be fixed by #2424, and will be available in the next release.

You can already try it using:

• npm install @headlessui/vue@insiders.

[paulcwatts]

Thanks for the quick fix!