ensure we compare raw values (#307)

Author: RobinMalfait

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

@@ -192,6 +192,58 @@ describe('Rendering', () => {
       `Pickup - ${JSON.stringify({ checked: false, active: false })}`
     )
   })
+
+  it('should set the checked v-slot info to true for the selected item (testing with objects, because Vue proxies)', async () => {
+    renderTemplate({
+      template: html`
+        <RadioGroup v-model="deliveryMethod">
+          <RadioGroupLabel>Pizza Delivery</RadioGroupLabel>
+          <RadioGroupOption v-for="option in options" key="option.id" :value="option" v-slot="data"
+            >{{option.label}} - {{JSON.stringify(data)}}</RadioGroupOption
+          >
+        </RadioGroup>
+      `,
+      setup() {
+        let deliveryMethod = ref(undefined)
+        let options = ref([
+          { id: 1, label: 'Pickup' },
+          { id: 2, label: 'Home delivery' },
+          { id: 3, label: 'Dine in' },
+        ])
+        return { deliveryMethod, options }
+      },
+    })
+
+    await new Promise<void>(nextTick)
+
+    let [pickup, homeDelivery, dineIn] = Array.from(
+      document.querySelectorAll('[id^="headlessui-radiogroup-option-"]')
+    )
+    expect(pickup).toHaveTextContent(
+      `Pickup - ${JSON.stringify({ checked: false, active: false })}`
+    )
+    expect(homeDelivery).toHaveTextContent(
+      `Home delivery - ${JSON.stringify({ checked: false, active: false })}`
+    )
+    expect(dineIn).toHaveTextContent(
+      `Dine in - ${JSON.stringify({ checked: false, active: false })}`
+    )
+
+    await click(homeDelivery)
+    ;[pickup, homeDelivery, dineIn] = Array.from(
+      document.querySelectorAll('[id^="headlessui-radiogroup-option-"]')
+    )
+
+    expect(pickup).toHaveTextContent(
+      `Pickup - ${JSON.stringify({ checked: false, active: false })}`
+    )
+    expect(homeDelivery).toHaveTextContent(
+      `Home delivery - ${JSON.stringify({ checked: true, active: true })}`
+    )
+    expect(dineIn).toHaveTextContent(
+      `Dine in - ${JSON.stringify({ checked: false, active: false })}`
+    )
+  })
 })
 
 describe('Keyboard interactions', () => {

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

@@ -7,6 +7,7 @@ import {
   onUnmounted,
   provide,
   ref,
+  toRaw,
   watchEffect,
 
   // Types
@@ -241,18 +242,17 @@ export let RadioGroupOption = defineComponent({
     let api = useRadioGroupContext('RadioGroupOption')
 
     let firstRadio = api.options.value?.[0]?.id === this.id
-    let checked = api.value.value === value
 
-    let slot = { checked, active: Boolean(this.state & OptionState.Active) }
+    let slot = { checked: this.checked, active: Boolean(this.state & OptionState.Active) }
     let propsWeControl = {
       id: this.id,
       ref: 'el',
       role: 'radio',
       class: resolvePropValue(className, slot),
-      'aria-checked': checked ? 'true' : 'false',
+      'aria-checked': this.checked ? 'true' : 'false',
       'aria-labelledby': this.labelledby,
       'aria-describedby': this.describedby,
-      tabIndex: checked ? 0 : api.value.value === undefined && firstRadio ? 0 : -1,
+      tabIndex: this.checked ? 0 : api.value.value === undefined && firstRadio ? 0 : -1,
       onClick: this.handleClick,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
@@ -291,6 +291,7 @@ export let RadioGroupOption = defineComponent({
       state,
       LabelProvider,
       DescriptionProvider,
+      checked: computed(() => toRaw(api.value.value) === toRaw(props.value)),
       handleClick() {
         let value = props.value
         if (api.value.value === value) return