Ensure DOM ref is properly handled in the RadioGroup component (#2424)

* drop `by` prop

Otherwise it ends up in the DOM which doesn't hurt but isn't ideal
either.

* ensure we are reading the underlying DOM correctly

We assumed that the `optionRef` was `HTMLElement | null`, but if you use
a custom component, then it is exposed as `{ $el: ref }`, this is why we
use the `dom()` helper.

* add test to ensure using a custom `as` prop works as expected

* update changelog

Author: RobinMalfait

packages/@headlessui-vue/CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Disable `ComboboxInput` when its `Combobox` is disabled ([#2375](https://github.com/tailwindlabs/headlessui/pull/2375))
 - Add `FocusTrap` event listeners once document has loaded ([#2389](https://github.com/tailwindlabs/headlessui/pull/2389))
 - Don't scroll-lock `<Dialog>` when wrapping transition isn't showing ([#2422](https://github.com/tailwindlabs/headlessui/pull/2422))
+- Ensure DOM `ref` is properly handled in the `RadioGroup` component ([#2424](https://github.com/tailwindlabs/headlessui/pull/2424))
 
 ### Added
 

packages/@headlessui-vue/src/components/combobox/combobox.test.ts

@@ -1523,6 +1523,33 @@ describe('Rendering', () => {
       expect(handleChange).toHaveBeenNthCalledWith(2, 'bob')
     })
   })
+
+  it(
+    'should be possible to use a custom component using the `as` prop without crashing',
+    suppressConsoleLogs(async () => {
+      let CustomComponent = defineComponent({
+        template: html`<button><slot /></button>`,
+      })
+
+      renderTemplate({
+        template: html`
+          <Combobox name="assignee">
+            <ComboboxInput />
+            <ComboboxButton />
+            <ComboboxOptions>
+              <ComboboxOption :as="CustomComponent" value="alice">Alice</RadioGroupOption>
+              <ComboboxOption :as="CustomComponent" value="bob">Bob</RadioGroupOption>
+              <ComboboxOption :as="CustomComponent" value="charlie">Charlie</RadioGroupOption>
+            </ComboboxOptions>
+          </Combobox>
+        `,
+        setup: () => ({ CustomComponent }),
+      })
+
+      // Open combobox
+      await click(getComboboxButton())
+    })
+  )
 })
 
 describe('Rendering composition', () => {

packages/@headlessui-vue/src/components/listbox/listbox.test.tsx

@@ -1270,6 +1270,32 @@ describe('Rendering', () => {
       expect(handleChange).toHaveBeenNthCalledWith(2, 'bob')
     })
   })
+
+  it(
+    'should be possible to use a custom component using the `as` prop without crashing',
+    suppressConsoleLogs(async () => {
+      let CustomComponent = defineComponent({
+        template: html`<button><slot /></button>`,
+      })
+
+      renderTemplate({
+        template: html`
+          <Listbox name="assignee">
+            <ListboxButton />
+            <ListboxOptions>
+              <ListboxOption :as="CustomComponent" value="alice">Alice</RadioGroupOption>
+              <ListboxOption :as="CustomComponent" value="bob">Bob</RadioGroupOption>
+              <ListboxOption :as="CustomComponent" value="charlie">Charlie</RadioGroupOption>
+            </ListboxOptions>
+          </Listbox>
+        `,
+        setup: () => ({ CustomComponent }),
+      })
+
+      // Open listbox
+      await click(getListboxButton())
+    })
+  )
 })
 
 describe('Rendering composition', () => {

packages/@headlessui-vue/src/components/menu/menu.test.tsx

@@ -818,6 +818,32 @@ describe('Rendering', () => {
     // Verify that the third menu item is active
     assertMenuLinkedWithMenuItem(items[2])
   })
+
+  it(
+    'should be possible to use a custom component using the `as` prop without crashing',
+    suppressConsoleLogs(async () => {
+      let CustomComponent = defineComponent({
+        template: `<button><slot /></button>`,
+      })
+
+      renderTemplate({
+        template: `
+          <Menu>
+            <MenuButton />
+            <MenuOptions>
+              <MenuOption :as="CustomComponent">Alice</RadioGroupOption>
+              <MenuOption :as="CustomComponent">Bob</RadioGroupOption>
+              <MenuOption :as="CustomComponent">Charlie</RadioGroupOption>
+            </MenuOptions>
+          </Menu>
+        `,
+        setup: () => ({ CustomComponent }),
+      })
+
+      // Open menu
+      await click(getMenuButton())
+    })
+  )
 })
 
 describe('Rendering composition', () => {

packages/@headlessui-vue/src/components/radio-group/radio-group.test.ts

@@ -1,4 +1,4 @@
-import { nextTick, ref, watch, reactive } from 'vue'
+import { nextTick, ref, watch, reactive, defineComponent, defineExpose } from 'vue'
 import { createRenderTemplate, render } from '../../test-utils/vue-testing-library'
 
 import { RadioGroup, RadioGroupOption, RadioGroupLabel, RadioGroupDescription } from './radio-group'
@@ -496,6 +496,26 @@ describe('Rendering', () => {
     assertActiveElement(getByText('Option 3'))
   })
 
+  it(
+    'should be possible to use a custom component using the `as` prop without crashing',
+    suppressConsoleLogs(async () => {
+      let CustomComponent = defineComponent({
+        template: html`<button><slot /></button>`,
+      })
+
+      renderTemplate({
+        template: html`
+          <RadioGroup name="assignee">
+            <RadioGroupOption :as="CustomComponent" value="alice">Alice</RadioGroupOption>
+            <RadioGroupOption :as="CustomComponent" value="bob">Bob</RadioGroupOption>
+            <RadioGroupOption :as="CustomComponent" value="charlie">Charlie</RadioGroupOption>
+          </RadioGroup>
+        `,
+        setup: () => ({ CustomComponent }),
+      })
+    })
+  )
+
   describe('Equality', () => {
     let options = [
       { id: 1, name: 'Alice' },

packages/@headlessui-vue/src/components/radio-group/radio-group.ts

@@ -272,7 +272,7 @@ export let RadioGroup = defineComponent({
           : []),
         render({
           ourProps,
-          theirProps: { ...attrs, ...omit(theirProps, ['modelValue', 'defaultValue']) },
+          theirProps: { ...attrs, ...omit(theirProps, ['modelValue', 'defaultValue', 'by']) },
           slot: {},
           attrs,
           slots,
@@ -309,7 +309,8 @@ export let RadioGroupOption = defineComponent({
 
     expose({ el: optionRef, $el: optionRef })
 
-    onMounted(() => api.registerOption({ id: props.id, element: optionRef, propsRef }))
+    let element = computed(() => dom(optionRef))
+    onMounted(() => api.registerOption({ id: props.id, element, propsRef }))
     onUnmounted(() => api.unregisterOption(props.id))
 
     let isFirstOption = computed(() => api.firstOption.value?.id === props.id)
@@ -326,7 +327,7 @@ export let RadioGroupOption = defineComponent({
       if (!api.change(props.value)) return
 
       state.value |= OptionState.Active
-      optionRef.value?.focus()
+      dom(optionRef)?.focus()
     }
 
     function handleFocus() {