[Question]: On Disclosure.Panel, clicking a navigation item reloads whole page rather than updating DOM content

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.0.0

What browser are you using?

Chrome

Reproduction repository

https://www.youtube.com/watch?v=n5MFF_ViaCg

Describe your issue

When using Disclosure.Panel below, a click on a navigation item reloads the whole page. When I swapped out the tag for a react-router-dom Link component tag, the DOM is correctly reloaded with content of the destination link (and no page reload). However, the Disclosure.Panel stays open.

I see similar issues like this with Vue but wasn’t able to correctly apply any fixes.

<Disclosure.Panel as="nav" className="sm:hidden" aria-label="Global" > <div className="pt-2 pb-3 px-2 space-y-1"> {navigation.map((item) => ( <a key={item.name} href={item.href} className={classNames( item.current ? "bg-gray-100 text-gray-900" : "text-gray-900 hover:bg-gray-50 hover:text-gray-900", "block rounded-md py-2 px-3 text-base font-medium" )} aria-current={item.current ? "page" : undefined} > {item.name} </a> ))} </div>

and the Link usage is:

<Disclosure.Panel as="nav" // className={disclosurePanelVisibility} className="sm:hidden" aria-label="Global" > <div className="pt-2 pb-3 px-2 space-y-1"> {navigation.map((item) => ( <Link key={item.name} to={item.href} // onClick={() => setDisclosurePanelVisibility("hidden")} className={classNames( item.current ? "bg-gray-100 text-gray-900" : "text-gray-900 hover:bg-gray-50 hover:text-gray-900", "block rounded-md py-2 px-3 text-base font-medium" )} aria-current={item.current ? "page" : undefined} > {item.name} </Link> ))} </div>

[RobinMalfait]

@depsimon I would recommend to create a custom Link component instead, because now you will be rendering a button inside an a tag which isn’t ideal.

@MJGTwo I’ll make sure to add this page from the Menu component to other components as well. Checkout: https://headlessui.dev/react/menu#integrating-with-next-js

[depsimon]

Had the same issue and the same solution, for future reference here’s what to change (in this case it’s a Next.js project)

Issue : (triggers page reloading when clicking)

<Link href="/clients" passHref={true}>
  <Disclosure.Button
    as="a"
    className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
  >
    Clients
  </Disclosure.Button>
</Link>

Solution :

<Link href="/clients">
    <a
      className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
    >
      <Disclosure.Button>
        Clients
      </Disclosure.Button>
    </a>
  )}
</ActiveLink>