Transition component not closing correctly in mobile navigation example

[Nasafato]

What component (if applicable)

• URL for category: https://tailwindui.com/components/application-ui/application-shells/multi-column#component-6e22fa5715141e2f842a9c887bcfb7a3
• Component name: Full-width with narrow sidebar

Describe the bug In the React example when copied and rendered locally, the mobile view Bars3Icon can't be clicked on after opening and closing the navigation dialog the first time. In fact, nothing on the screen can be clicked. The <Transition> component seems to not be closing correctly, as evidenced in the HTML in the screenshot.

To Reproduce Steps to reproduce the behavior:

1. pnpm vite create a React project
2. Render the example
3. Shrink the screen size to iPhone
4. Click on the hamburger icon in the top-right, then close the menu. After that, cannot click on anything in the screen.

Expected behavior I should be able to open and close the mobile nav menu as many times as I want, and things should be clickable after closing the mobile nav menu.

Screenshots

Browser/Device (if applicable)

• OS: macOS 12.6
• Browser: Chrome 105
• Version: 105

Additional context I think it's because the backdrop isn't transitioning out correctly when closing the menu, because when I remove the backdrop everything works correctly.

[RobinMalfait]

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

This is a bug that used to exist in an older version of Headless UI. Can you make sure that you are on the newest version of Headless UI?

If that doesn't work, can you create a minimal reproduction repo that you can share so that we can debug it?

[reinink]

@Nasafato Hey! Just following up on this issue. I am going to close this because we haven't heard back, but as Robin noted, I think this has been resolved in a more recent version of Headless UI, so updating to the latest version should fix it. Also, just to make sure, I've tried this component myself locally and it seems to be working. Sorry for the trouble!