Closing a popover when the user clicks on Link inside it

[nirtamir2]

Hi
I have an app with a Popover component for a menu.
Inside the popover, the user can navigate to a different section if the app with client-side navigation via the Link component from next/link. When I navigate to the URL, the popover keeps being open. I wonder what is the best practice of closing it when the user clicks on the link. I can wrap it with Popover.Close / programmatically with onClick - but I wonder if there is a better way to handle this case. What do you think?
Thanks!

[nirtamir2]

I ended up doing:

function RouteChangeAutoClosePopover(props: { children: ReactNode }) {
  const { children } = props;
  const [isOpen, setIsOpen] = useState(false);
  const pathname = usePathname();

  useEffect(() => {
    setIsOpen(false);
  }, [pathname]);

  return (
    <Popover open={isOpen} onOpenChange={setIsOpen}>
      {children}
    </Popover>
  );
}

But I would like to have a more generic approach. Maybe having an additional prop to RouteChangeAutoClosePopover named shouldCloseOnRouteChange that will take all the popover props in this case? Or do we have a better way to do it in user-land?

[giulianoc-keplero]

Thank you for this solution. It's a bit cumbersome, there's nothing more straightforward uh?

[arjendevos]

+1

[tur-nr]

When you make the popover controlled it seems to lose its accessibility, click-away and Esc keyboard.

It's a little stupid but works if you put the <PopoverClose> component in as invisible and then useRef so that you can call .click() on it. This will dismiss the popover programmatically and without having to go controlled and lose accessibility.

This is useful for if you lots of a closable buttons like an emoji picker.

import { Popover } from "radix-ui";

export default () => {
  const closeButtonRef = useRef(null);
  const closePopover = () => closeButtonRef.current?.click();
  return (
    <Popover.Root>
      <Popover.Portal>
        <Popover.Content>
          <Popover.Close asChild>
            <button ref={closeButtonRef} type="button" style={{ visibility: "hidden" }} />
          </Popover.Close>
        </Popover.Content>
      </Popover.Portal>
    </Popover.Root>
  );
}