Change default tags for ListboxOptions, ListboxOption, `ComboboxO…

…ptions`, `ComboboxOption` and `TabGroup` components (#3109) * use `div` as default tag for `ListboxOptions` and `ListboxOption` components * use `div` as default tag for `ComboboxOptions` and `ComboboxOption` components * use `div` as default tag for `TabGroup` * update changelog
tailwindlabs · Apr 18, 2024 · 83cda0a · 83cda0a
1 parent 9f44656
commit 83cda0a
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 6 deletions.
diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
@@ -29,6 +29,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Deprecate the `entered` prop on the `Transition` component ([#3089](https://github.com/tailwindlabs/headlessui/pull/3089))
 - Use native `useId` and `useSyncExternalStore` hooks ([#3092](https://github.com/tailwindlabs/headlessui/pull/3092))
 - Use `absolute` as the default Floating UI strategy ([#3097](https://github.com/tailwindlabs/headlessui/pull/3097))
+- Change default tags for `ListboxOptions`, `ListboxOption`, `ComboboxOptions`, `ComboboxOption` and `TabGroup` components ([#3109](https://github.com/tailwindlabs/headlessui/pull/3109))
 
 ### Added
 

diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx
@@ -1519,7 +1519,7 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
 
 // ---
 
-let DEFAULT_OPTIONS_TAG = 'ul' as const
+let DEFAULT_OPTIONS_TAG = 'div' as const
 type OptionsRenderPropArg = {
   open: boolean
   option: unknown
@@ -1630,7 +1630,7 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
 
 // ---
 
-let DEFAULT_OPTION_TAG = 'li' as const
+let DEFAULT_OPTION_TAG = 'div' as const
 type OptionRenderPropArg = {
   focus: boolean
   /** @deprecated use `focus` instead */

diff --git a/packages/@headlessui-react/src/components/listbox/listbox.tsx b/packages/@headlessui-react/src/components/listbox/listbox.tsx
@@ -849,7 +849,7 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
 
 let SelectedOptionContext = createContext(false)
 
-let DEFAULT_OPTIONS_TAG = 'ul' as const
+let DEFAULT_OPTIONS_TAG = 'div' as const
 type OptionsRenderPropArg = {
   open: boolean
 }
@@ -1100,7 +1100,7 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
 
 // ---
 
-let DEFAULT_OPTION_TAG = 'li' as const
+let DEFAULT_OPTION_TAG = 'div' as const
 type OptionRenderPropArg = {
   /** @deprecated use `focus` instead */
   active: boolean

diff --git a/packages/@headlessui-react/src/components/tabs/tabs.tsx b/packages/@headlessui-react/src/components/tabs/tabs.tsx
@@ -3,7 +3,6 @@
 import { useFocusRing } from '@react-aria/focus'
 import { useHover } from '@react-aria/interactions'
 import React, {
-  Fragment,
   createContext,
   useContext,
   useMemo,
@@ -220,7 +219,7 @@ function stateReducer(state: StateDefinition, action: Actions) {
 
 // ---
 
-let DEFAULT_TABS_TAG = Fragment
+let DEFAULT_TABS_TAG = 'div' as const
 type TabsRenderPropArg = {
   selectedIndex: number
 }