Ensure refs are forwarded when freezing data (#3390)

We were wrapping rendered children in `<Frozen>` in a combobox however
the refs weren't being forwarded through the internal `<Frozen>`
component resulting in issues when rendering `<ComboboxOptions>` as a
`Fragment`.

After this PR the following code no longer warns about function
components not accepting refs.

```tsx
import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions } from '@headlessui/react'
import React from 'react'

export default function Example() {
  return (
    <div className="p-4">
      <Combobox>
        <ComboboxInput className="rounded border border-neutral-400 p-2" />
        <ComboboxOptions as={React.Fragment}>
          <div className="bg-orange-500 p-4">
            <ComboboxOption value="a">A</ComboboxOption>
          </div>
        </ComboboxOptions>
      </Combobox>
    </div>
  )
}
```

Fixes #3384

---------

Co-authored-by: Robin Malfait <[email protected]>

Author: thecrypticace

packages/@headlessui-react/CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Allow home/end key default behavior inside `ComboboxInput` when `Combobox` is closed ([#3798](https://github.com/tailwindlabs/headlessui/pull/3798))
 - Ensure interacting with a `Dialog` on iOS works after interacting with a disallowed area ([#3801](https://github.com/tailwindlabs/headlessui/pull/3801))
 - Freeze Listbox values as soon as possible when closing ([#3802](https://github.com/tailwindlabs/headlessui/pull/3802))
+- Ensure refs are forwarded when freezing data ([#3390](https://github.com/tailwindlabs/headlessui/pull/3390))
 
 ## [2.2.8] - 2025-09-12
 

packages/@headlessui-react/src/internal/frozen.tsx

@@ -1,10 +1,20 @@
-import React, { useState } from 'react'
+import React, { cloneElement, isValidElement, useState } from 'react'
 
-export function Frozen({ children, freeze }: { children: React.ReactNode; freeze: boolean }) {
+function FrozenFn(
+  { children, freeze }: { children: React.ReactNode; freeze: boolean },
+  ref: React.ForwardedRef<HTMLElement>
+) {
   let contents = useFrozenData(freeze, children)
+
+  if (isValidElement(contents)) {
+    return cloneElement(contents as React.ReactElement, { ref })
+  }
+
   return <>{contents}</>
 }
 
+export const Frozen = React.forwardRef(FrozenFn)
+
 export function useFrozenData<T>(freeze: boolean, data: T) {
   let [frozenValue, setFrozenValue] = useState(data)