Sidebar window resizing causes sidebar not to re-appear and no response from click events

[ptimson]

What component (if applicable)

• URL for category: Home Screens
• Component name: Full-width with sidebar

Describe the bug
On smaller screen sizes max-width: 1023px when the sidebar is hidden, resizing the screen to min-width: 1024px and then back to max-width: 1023px causes an issue where it seems like the window no longer responds to click events.

It works on the component demo screen but does not work when copying the code into our project, so we wonder if the code has not been updated?

To Reproduce
Steps to reproduce the behaviour:

1. Bootstrap a NextJS app with tailwindcss
2. Copy and save component code to a new page src/pages/preview.jsx
3. Visit the page and confirm UI same as component link above
4. Resize window to max-width: 1023px to reveal hamburger menu
5. Click on hamburger menu to reveal sidebar
6. Resize window to min-width: 1024px to hide hamburger menu
7. Resize window to max-width: 1023px to reveal hamburger menu
8. Notice sidebar is hidden
9. Notice other components in window not clickable
10. Notice [7] and [8] does not occur in component demo page

Expected behaviour
Sidebar should remain visible after steps [4], [5], and [6]

Screenshots
Expected

Actual

Browser/Device (if applicable)

• OS: Windows 10 and MacOS xx

• Browser: Chrome

• Version: 101.0.4951.67 (Official Build) (64-bit)

• @headlessui/react: "^1.6.1"

Additional context
N/A

[RobinMalfait]

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

This is an issue in Headless UI and we just released a fix in #1500. It should already be available in the latest 1.6.3 release.

Sorry for the inconvenience