tab content is not displayed when components are imported async

[ahoyahoy]

tab content is not displayed when components are imported async
until click tab button or page is rerendered (with already initialized components)

minimal example
https://stackblitz.com/edit/github-lbvgvg-h9qsnw?file=src%2FApp.vue

I noticed a similar behavior with the components for the dropdown menu, when the width of the menu according to the button is incorrectly set the first time, but when rerendering it works fine

[RobinMalfait]

Hey, thank you for this bug report! 🙏

What is the reason you want to do this? I think what I would do instead is use Headless UI as described in the docs and import it straight away. But if you want to optimize the contents, lazy load the contents of the TabPanel instead of the TabPanel itself.

Is this a solution that would work for you?

[ahoyahoy]

Hi @RobinMalfait

the use case is dynamic loading components in the page builder, so the components are not part of the main application.

:(

[ahoyahoy]

ping @RobinMalfait

[RobinMalfait]

Hey!

Sorry for the delay. Closing an issue doesn't mean that the conversation is over. Closing is more of a way to know that we handle an issue and if new information is available that wasn't available yet that results in the fact that an actual issue is present in Headless UI then we can take next steps and re-open the issue if necessary.

In this case, the potential solution I provided was not enough for your use case which is totally fine. But now that I know your use case a bit more, I dug deeper to see what's going on exactly.

It just took a bit of time on my end to get back to this issue, my apologies for this.

That said, this should be fixed by #2642, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.
• npm install @headlessui/vue@insiders.

[ahoyahoy]

hi @RobinMalfait ,

thank you very much and really sorry for the panic :)