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

[FullStackJohnMack]

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>

[FullStackJohnMack]

I apologize for the format of the code... I'm not sure how to clean it up.

[FullStackJohnMack]

Solved: It appears that I can wrap the link text in a Disclosure.Button tag and it closes the menu.

[FullStackJohnMack]

What a trainwreck of a post I made... I just want to make sure I'm handling this correctly.

[RobinMalfait]

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

I'm not 100% what you are asking here. Currently the only way to open/close a Disclosure is by clicking the actual Disclosure.Button component.

That said, your main question seems to be related to a page refresh. The Disclosure component doesn't handle anything regarding your routing. If your page refreshes then you probably have an issue where you use a Link from the router library you are using.

[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>

[MJGTwo]

thanks for posting this, the example at https://tailwindui.com/components/application-ui/navigation/navbars has the version of the code that makes it reload everything, so maybe someone can fix this on the website. @RobinMalfait who should be ask to do that?

[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]

Thanks for clarifying this @RobinMalfait !