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)