From 532bc27f2f32d373c3875764f550e72aaf70ec25 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Wed, 4 Oct 2023 13:27:13 -0400
Subject: [PATCH 1/2] Add tests

---
 .../@headlessui-vue/src/utils/render.test.ts  | 31 ++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/packages/@headlessui-vue/src/utils/render.test.ts b/packages/@headlessui-vue/src/utils/render.test.ts
index a4f1523152..546dd1b0d2 100644
--- a/packages/@headlessui-vue/src/utils/render.test.ts
+++ b/packages/@headlessui-vue/src/utils/render.test.ts
@@ -6,9 +6,21 @@ import { render } from './render'
 let Dummy = defineComponent({
   props: {
     as: { type: [Object, String], default: 'div' },
+    slot: { type: Object, default: () => ({}) },
   },
   setup(props, { attrs, slots }) {
-    return () => render({ theirProps: props, ourProps: {}, slots, attrs, slot: {}, name: 'Dummy' })
+    return () => {
+      let { slot, ...rest } = props
+
+      return render({
+        theirProps: rest,
+        ourProps: {},
+        slots,
+        attrs,
+        slot,
+        name: 'Dummy',
+      })
+    }
   },
 })
 
@@ -120,3 +132,20 @@ describe('Validation', () => {
     expect(document.getElementById('result')).toHaveAttribute('data-test', '123')
   })
 })
+
+describe('State Data Attributes', () => {
+  it('as=element', () => {
+    renderTemplate({
+      template: html`
+        <Dummy id="result" as="div" :slot="{active: true, selected: true}">
+          <div>test</div>
+        </Dummy>
+      `,
+    })
+
+    expect(document.getElementById('result')).toHaveAttribute(
+      'data-headlessui-state',
+      'active selected'
+    )
+  })
+})

From 6e9df51f353b5c67c4d592a7da64709eb0091f27 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Wed, 4 Oct 2023 13:29:24 -0400
Subject: [PATCH 2/2] Fix state data attribute in Vue

---
 .../@headlessui-vue/src/utils/render.test.ts   | 18 ++++++++++++++++++
 packages/@headlessui-vue/src/utils/render.ts   |  3 ++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/@headlessui-vue/src/utils/render.test.ts b/packages/@headlessui-vue/src/utils/render.test.ts
index 546dd1b0d2..24f9f1fa01 100644
--- a/packages/@headlessui-vue/src/utils/render.test.ts
+++ b/packages/@headlessui-vue/src/utils/render.test.ts
@@ -148,4 +148,22 @@ describe('State Data Attributes', () => {
       'active selected'
     )
   })
+
+  it('as=template', () => {
+    renderTemplate({
+      template: html`
+        <Dummy as="template" class="abc" :slot="{active: true, selected: true}">
+          <div id="result">test</div>
+        </Dummy>
+      `,
+    })
+
+    expect(document.getElementById('result')).toHaveClass('abc')
+
+    // NOTE: Removing class="abc" causes this assertion to fail
+    expect(document.getElementById('result')).toHaveAttribute(
+      'data-headlessui-state',
+      'active selected'
+    )
+  })
 })
diff --git a/packages/@headlessui-vue/src/utils/render.ts b/packages/@headlessui-vue/src/utils/render.ts
index 6896a51e58..9d4d8cd0a0 100644
--- a/packages/@headlessui-vue/src/utils/render.ts
+++ b/packages/@headlessui-vue/src/utils/render.ts
@@ -139,7 +139,7 @@ function _render({
         )
       }
 
-      let mergedProps = mergeProps(firstChild.props ?? {}, incomingProps)
+      let mergedProps = mergeProps(firstChild.props ?? {}, incomingProps, dataAttributes)
       let cloned = cloneVNode(firstChild, mergedProps, true)
       // Explicitly override props starting with `on`. This is for event handlers, but there are
       // scenario's where we set them to `undefined` explicitly (when `aria-disabled="true"` is
@@ -155,6 +155,7 @@ function _render({
     }
 
     if (Array.isArray(children) && children.length === 1) {
+      // TODO: Do we need to cloneVNode + dataAttributes here?
       return children[0]
     }