[Bug]: Modal closes automatically with Next.JS

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

1.1.1

What browser are you using?

Chrome 90

Reproduction repository

https://codesandbox.io/s/headless-ui-next-issue-l17wk?file=/pages/page2.js

Describe your issue

Basic setup: there are two pages, each page has a modal. So modals should be independent from pages. But if you open and close modal on page1 then switch to page2 and click on Open dialog button, onClose is called for whatever reason right after modal opens. You can see this in console. Firstly, i thought that initialFocus that is pointing to cancel button is pressed on open. But that’s not the case here. closeModal is called from onClose prop.

[andrewli-ca]

Somewhat related issue where I’m trying to render a Dialog on one page(ie. page1) and another Dialog on another page(ie. page2).

Opening the Dialog works fine on page1. However, when navigating from page 1 to page2, the Dialog fails to open on this page. It seems the cause of this problem is the headlessui-portal-root element is missing from the DOM which is why the Dialog cannot open.

When navigating back from page2 to page1, the headlessui-portal-root element shows up again.

I’m not sure why this is happening, would love to have an explanation.

Here’s a GIF of the issue using @TheAsda 's sandbox:

[ldnsh]

SSR playing trickery here. This hook solved it for me:

// useHasMounted.ts

export default function useIsMounted() {
  const [isMounted, setIsMounted] = React.useState(false);
  React.useEffect(() => {
    setIsMounted(true);
  }, []);
  return isMounted;
}

Use it like so

// page.tsx (NextJS)

import useIsMounted from '@hooks/useIsMounted'

 const isMounted = useIsMounted()

  if (!isMounted) {
    return null
  }