From 807ae66b8dc489214428f433eaf346851241e00d Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 27 Apr 2022 23:38:50 +0200
Subject: [PATCH] Manually passthrough `attrs` for `Combobox`, `Listbox` and
 `TabsGroup` component (#1372)

* manually pass through `attrs`

Due to the return of the Fragment (for form compatibility) the
attributes will now be pass onto this Fragment instead of the underlying
DOM node. To fix this, we disable the `inheritAttrs` magic, and
passthrough the attributes to the correct component.

* update changelog
---
 CHANGELOG.md                                                | 4 +++-
 .../@headlessui-vue/src/components/combobox/combobox.ts     | 6 +++++-
 packages/@headlessui-vue/src/components/listbox/listbox.ts  | 6 +++++-
 packages/@headlessui-vue/src/components/tabs/tabs.ts        | 6 +++++-
 4 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d0f2f13..deda179 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,7 +11,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased - @headlessui/vue]
 
-- Nothing yet!
+### Fixed
+
+- Manually passthrough `attrs` for `Combobox`, `Listbox` and `TabsGroup` component ([#1372](https://github.com/tailwindlabs/headlessui/pull/1372))
 
 ## [@headlessui/react@v1.6.0] - 2022-04-25
 
diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.ts b/packages/@headlessui-vue/src/components/combobox/combobox.ts
index 8312b61..587933f 100644
--- a/packages/@headlessui-vue/src/components/combobox/combobox.ts
+++ b/packages/@headlessui-vue/src/components/combobox/combobox.ts
@@ -115,6 +115,7 @@ export let Combobox = defineComponent({
     nullable: { type: Boolean, default: false },
     multiple: { type: [Boolean], default: false },
   },
+  inheritAttrs: false,
   setup(props, { slots, attrs, emit }) {
     let comboboxState = ref<StateDefinition['comboboxState']['value']>(ComboboxStates.Closed)
     let labelRef = ref<StateDefinition['labelRef']['value']>(null)
@@ -445,7 +446,10 @@ export let Combobox = defineComponent({
             )
           : []),
         render({
-          props: omit(incomingProps, ['nullable', 'multiple', 'onUpdate:modelValue']),
+          props: {
+            ...attrs,
+            ...omit(incomingProps, ['nullable', 'multiple', 'onUpdate:modelValue']),
+          },
           slot,
           slots,
           attrs,
diff --git a/packages/@headlessui-vue/src/components/listbox/listbox.ts b/packages/@headlessui-vue/src/components/listbox/listbox.ts
index 17e446e..e720810 100644
--- a/packages/@headlessui-vue/src/components/listbox/listbox.ts
+++ b/packages/@headlessui-vue/src/components/listbox/listbox.ts
@@ -115,6 +115,7 @@ export let Listbox = defineComponent({
     name: { type: String, optional: true },
     multiple: { type: [Boolean], default: false },
   },
+  inheritAttrs: false,
   setup(props, { slots, attrs, emit }) {
     let listboxState = ref<StateDefinition['listboxState']['value']>(ListboxStates.Closed)
     let labelRef = ref<StateDefinition['labelRef']['value']>(null)
@@ -328,7 +329,10 @@ export let Listbox = defineComponent({
             )
           : []),
         render({
-          props: omit(incomingProps, ['onUpdate:modelValue', 'horizontal', 'multiple']),
+          props: {
+            ...attrs,
+            ...omit(incomingProps, ['onUpdate:modelValue', 'horizontal', 'multiple']),
+          },
           slot,
           slots,
           attrs,
diff --git a/packages/@headlessui-vue/src/components/tabs/tabs.ts b/packages/@headlessui-vue/src/components/tabs/tabs.ts
index a415aaf..72334d8 100644
--- a/packages/@headlessui-vue/src/components/tabs/tabs.ts
+++ b/packages/@headlessui-vue/src/components/tabs/tabs.ts
@@ -69,6 +69,7 @@ export let TabGroup = defineComponent({
     vertical: { type: [Boolean], default: false },
     manual: { type: [Boolean], default: false },
   },
+  inheritAttrs: false,
   setup(props, { slots, attrs, emit }) {
     let selectedIndex = ref<StateDefinition['selectedIndex']['value']>(null)
     let tabs = ref<StateDefinition['tabs']['value']>([])
@@ -152,7 +153,10 @@ export let TabGroup = defineComponent({
           },
         }),
         render({
-          props: omit(props, ['selectedIndex', 'defaultIndex', 'manual', 'vertical', 'onChange']),
+          props: {
+            ...attrs,
+            ...omit(props, ['selectedIndex', 'defaultIndex', 'manual', 'vertical', 'onChange']),
+          },
           slot,
           slots,
           attrs,