search

tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
25.81k stars 1.07k forks source link

Transition - current component <Transition.Child /> is rendering a "Fragment". #3228

Closed mbhartley-za closed 4 months ago

mbhartley-za commented 4 months ago

Good day. I did a clean setup of a React app and installed the latest version. When I use Transition, it gives this error message below, if I then take the transition out, page works fine again.

image

My code. image

RobinMalfait commented 4 months ago

Hey!

This happens when the child of Transition doesn't accept a ref and therefore we can't forward the ref to the underlying DOM node. This is necessary to animate the DOM node directly by applying the correct classes at the correct moment in time.

This seems to be an issue with riIcons.RiCloseCircleLine because I'm pretty sure it doesn't forward the ref correctly.

If you inline the <svg /> directly, then it should work as expected.

An alternative solution is to wrap the icon with a <div> such that you transition the div. This should work as expected because you are only transitioning the opacity-*

Hope this helps!

mbhartley-za commented 4 months ago

Good day.

Thank you for the clarification this. I will try your suggestion and get back to you if needed.

Thanks Brent

On Thu, 23 May 2024, 00:41 Robin Malfait, @.***> wrote:

Hey!

This happens when the child of Transition doesn't accept a ref and therefore we can't forward the ref to the underlying DOM node. This is necessary to animate the DOM node directly by applying the correct classes at the correct moment in time.

This seems to be an issue with riIcons.RiCloseCircleLine because I'm pretty sure it doesn't forward the ref correctly.

If you inline the directly, then it should work as expected.

An alternative solution is to wrap the icon with a

such that you transition the div. This should work as expected because you are only transitioning the opacity-*

Hope this helps!

— Reply to this email directly, view it on GitHub https://github.com/tailwindlabs/headlessui/issues/3228#issuecomment-2125890823, or unsubscribe https://github.com/notifications/unsubscribe-auth/BDAWN7K3XS4BSJ7LHC3LWITZDUNJXAVCNFSM6AAAAABIDURQJOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMRVHA4TAOBSGM . You are receiving this because you authored the thread.Message ID: @.***>