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

@@ -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
 

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,

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,

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,