How to use "unmount" and "static" at the same time on Disclosure.Panel in React

[jnovak-SM2Dev]

The documentation says you can't use "unmount" and "static" options on Disclosure.Panel at the same time because you will get a typescript error. Is there a way to make this work?

[RobinMalfait]

It's not only a TypeScript related issue, it is a conceptual issue which doesn't make much sense.

• unmount={true} (default), this means that Headless UI is in control of rendering and when the Disclosure is "closed", we will "unmount" the Disclosure.Panel.
• unmount={false}, this means that Headless UI is in control of rendering and when the Disclosure is "closed", we will keep the Disclosure.Panel in the DOM and hide it.
• static, this means that you are in control of rendering and you have to handle what to do when the Disclosure is "closed". You can transition out, you can hide, you can unmount, anything you want.

Therefore conceptually it doesn't make sense because using unmount={false} and static at the same time means that both Headless UI and you are in charge of rendering.

If you are stuck with something, then I think it is better to ask questions about what you are trying to achieve 👍

Hope this explains why it doesn't work together, good luck!

[jnovak-SM2Dev]

@RobinMalfait Thanks a lot! Yes it does and makes total sense. I thought either way that Headless UI was in control of it, but it makes sense that the transition would control it. I'm also using a Disclosure inside a Combobox to make a hierarchy select, so it's a bit complicated lol.