Fix 'Invalid prop data-headlessui-state supplied to React.Fragment' warning (#3788)

This PR fixes an issue in React 19 where a warning is shown in the
console:
```
Invalid prop `data-headlessui-state` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.
```

This PR fixes that by doing 2 things:

1. We make sure that we properly check for `Fragment`. We were relying
on identity, but will now also check the underlying symbol.
2. Make sure that the element we forward props to is not a `Fragment`
either.

## Test plan

- All existing tests still pass (this codebase is using React 18 instead
of 19,
  where we can't reproduce the warning)
- Tested in a reproduction repo with React 19 that the warning is gone.

Before:

<img width="1190" height="849" alt="image"
src="https://github.com/user-attachments/assets/c2fd061c-4b6b-4685-a59c-c0edc6eb8642"
/>

After:

<img width="1190" height="849" alt="image"
src="https://github.com/user-attachments/assets/ee8318b6-06fa-4fa7-84bf-b96af3a34f87"
/>

Fixes: #3597
Fixes: #3351

Author: RobinMalfait

packages/@headlessui-react/CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix `Maximum update depth exceeded` crash when using `transition` prop ([#3782](https://github.com/tailwindlabs/headlessui/pull/3782))
 - Ensure pressing `Tab` in the `ComboboxInput`, correctly syncs the input value ([#3785](https://github.com/tailwindlabs/headlessui/pull/3785))
 - Ensure `--button-width` and `--input-width` have the latest value ([#3786](https://github.com/tailwindlabs/headlessui/pull/3786))
+- Fix 'Invalid prop `data-headlessui-state` supplied to `React.Fragment`' warning ([#3788](https://github.com/tailwindlabs/headlessui/pull/3788))
 
 ## [2.2.7] - 2025-07-30
 

packages/@headlessui-react/src/components/disclosure/disclosure.tsx

@@ -41,6 +41,7 @@ import { getOwnerDocument } from '../../utils/owner'
 import {
   RenderFeatures,
   forwardRefWithAs,
+  isFragment,
   mergeProps,
   useRender,
   type HasDisplayName,
@@ -188,9 +189,7 @@ function DisclosureFn<TTag extends ElementType = typeof DEFAULT_DISCLOSURE_TAG>(
       (ref) => {
         internalDisclosureRef.current = ref
       },
-      props.as === undefined ||
-        // @ts-expect-error The `as` prop _can_ be a Fragment
-        props.as === Fragment
+      props.as === undefined || isFragment(props.as)
     )
   )
 

packages/@headlessui-react/src/components/transition/transition.tsx

@@ -29,6 +29,7 @@ import {
   RenderStrategy,
   compact,
   forwardRefWithAs,
+  isFragment,
   useRender,
   type HasDisplayName,
   type PropsForFeatures,
@@ -71,7 +72,7 @@ function shouldForwardRef<TTag extends ElementType = typeof DEFAULT_TRANSITION_C
         props.leaveTo
     ) ||
     // If the `as` prop is not a Fragment
-    (props.as ?? DEFAULT_TRANSITION_CHILD_TAG) !== Fragment ||
+    !isFragment(props.as ?? DEFAULT_TRANSITION_CHILD_TAG) ||
     // If we have a single child, then we can forward the ref directly
     React.Children.count(props.children) === 1
   )

packages/@headlessui-react/src/utils/render.ts

@@ -181,11 +181,12 @@ function _render<TTag extends ElementType, TSlot>(
     }
   }
 
-  if (Component === Fragment) {
+  if (isFragment(Component)) {
     if (Object.keys(compact(rest)).length > 0 || Object.keys(compact(dataAttributes)).length > 0) {
       if (
         !isValidElement(resolvedChildren) ||
-        (Array.isArray(resolvedChildren) && resolvedChildren.length > 1)
+        (Array.isArray(resolvedChildren) && resolvedChildren.length > 1) ||
+        isFragmentInstance(resolvedChildren)
       ) {
         if (Object.keys(compact(rest)).length > 0) {
           throw new Error(
@@ -270,8 +271,8 @@ function _render<TTag extends ElementType, TSlot>(
     Object.assign(
       {},
       omit(rest, ['ref']),
-      Component !== Fragment && refRelatedProps,
-      Component !== Fragment && dataAttributes
+      !isFragment(Component) && refRelatedProps,
+      !isFragment(Component) && dataAttributes
     ),
     resolvedChildren
   )
@@ -465,3 +466,11 @@ function getElementRef(element: React.ReactElement) {
   // @ts-expect-error
   return React.version.split('.')[0] >= '19' ? element.props.ref : element.ref
 }
+
+export function isFragment(element: any): element is typeof Fragment {
+  return element === Fragment || element === Symbol.for('react.fragment')
+}
+
+export function isFragmentInstance(element: React.ReactElement): boolean {
+  return isFragment(element.type)
+}