diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index 9f1082e921..3be6f51b82 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/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 diff --git a/packages/@headlessui-react/src/internal/frozen.tsx b/packages/@headlessui-react/src/internal/frozen.tsx index 6deffe31b5..5ab73174a3 100644 --- a/packages/@headlessui-react/src/internal/frozen.tsx +++ b/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 +) { 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(freeze: boolean, data: T) { let [frozenValue, setFrozenValue] = useState(data)