Elements with Transition not in DOM until show is true

[jorgeramos]

I'm working on an app that is using Transition for opening the modal menu used for navigation. The menu opens and closes as desired, however, the markup is not visible on the DOM unless it is open. This is problematic for SEO as that content would not be visible to the search engine crawlers. How can I make the component behave visually just as it is now, but just toggle the visibility so that the markup is always there?

You can see the behavior in the example app: https://b6xje.csb.app/

[sebastianmulders]

The same is true for when <Transition /> contains input definitions of a form. For example, when applying a transition on a set of conditional fields and that condition is false, the hidden fields are not part of the form request when submitting. That makes sense because they are not present in the dom.

I have not found a solution for this other than in my case defining a couple of hidden inputs outside of the transition. You could also consider defining the same content elsewhere and hide it manually. Perhaps not the most beautiful solution, but it'll do for now.

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

Both scenarios are true because we unmount the whole tree. I am going to experiment with an idea to make it stay in the DOM.

I'll keep you posted!

[Tzelon]

+1
It will be very useful if we have a prop that toggles that behavior.

[jorgeramos]

@RobinMalfait can you share what you have in mind? This is pretty critical so I'd like to give it a shot if you don't have the bandwidth at the moment.

[jorgeramos]

Hey! Thank you for your bug report!
Much appreciated! 🙏

Both scenarios are true because we unmount the whole tree. I am going to experiment with an idea to make it stay in the DOM.

I'll keep you posted!

Hi, do you think you'll have time over the next couple of days for this one? I'd love to jump in and work on it. Can you point me in the right direction with the ideas you had?

[RobinMalfait]

@jorgeramos Hey! I'm working on this the next couple of days. I will get back to this very shortly!

[RobinMalfait]

Hey! Small update: This should be working in the next version we publish.

Usage:

Put an unmount={false} on all the the Transition or Transition.Child elements that you want to keep in the DOM. From a visual perspective this should behave exactly the same. From a DOM perspective the components that have unmount={false} will get a hidden prop and a style={{ display: 'none' }}

The default value of unmount is true, so make sure to put it everywhere where you need it.

<Transition unmount={false} />
<Transition.Child unmount={false} />

[jorgeramos]

@RobinMalfait thanks for working on this. Do you have an expected date for the next release?