Popover Mechanism and triggerRef usability

[Berdugo1994]

Hello, I have a Popover with Buttons inside:

I would like to implement the next functionality:
when clicking outside - close.
when clicking on each of buttons - close.
when clicking on popover trigger - close.
otherwise, which basically nothing, stay open.

Seems easy right?
I tried a few tricks, first:

1. set everything to default, the issue was that when clicking on the button in the popover content, the popover wasn't closed.

2. I try to manage the issue with a useState (loggedOpen)

<Popover isOpen={loggedOpen} shouldCloseOnInteractOutside={() => { setLoggedOpen(false); return false; }}>
                <PopoverTrigger onClick={() => setLoggedOpen(o => !o)}>

But the issue was that when clicking on the trigger both shouldCloseOnInteractOutside and PopoverTrigger.onClick was called - which was set the state to loggedOpen = false, then true again, and as I explained I would like that when clicking the trigger button, close the popover(loggedOpen = false).

3. Then I tried to create a useRef and pass it over to the triggerRef

<Popover triggerRef={loggedRef}>

And in each Button onClick I tried change the ref.current to be closed something like:

onClick={() => {  loggedRef.current.ariaExpanded = "false"}

But it seems that changing the ref is a bad practice and it didn't work anyway.

I assumes that I can manage the ref better, please let me know if there is solution in this direction or any other creative solution :)

Package.json:

...
    "@nextui-org/avatar": "^2.0.24",
    "@nextui-org/react": "^2.4.1",
    "next": "^14.2.4",

Screen.Recording.2024-07-04.at.9.53.13.mov

[wingkwong]

May I know which version are you using?

[Berdugo1994]

Sure,

    "@nextui-org/avatar": "^2.0.24",
    "@nextui-org/react": "^2.4.1",
    "next": "^14.2.4",

The Popover is part of the TopNavbar

[wingkwong]

Can you also share what the current behaviour is ? It'd be appreciated if you could share a reproducible example as well.

[Berdugo1994]

I just edited the main discussion message and appended a short video.
Will try to add a sandbox later If that's not enough.

[Berdugo1994]

Simple Sandbox link:
https://codesandbox.io/p/sandbox/competent-parm-3t5vyk

[Berdugo1994]

Try click on badge and then click on badge(trigger) to close, it doesn't work since,
shouldCloseOnInteractOutside called when clicking on trigger...

[wingkwong]

Your sandbox link is not accessible.

[Berdugo1994]

Sorry, the sandbox is now available for public
https://codesandbox.io/p/devbox/competent-parm-3t5vyk

[Berdugo1994]

Please see attached sandbox:
Sandbox Link https://codesandbox.io/p/devbox/competent-parm-3t5vyk

[wingkwong]

you may try the following

import React from "react";
import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  Button,
} from "@nextui-org/react";

export default function App() {
  const [loggedOpen, setLoggedOpen] = React.useState<boolean>(false);
  const triggerRef = React.useRef(null);
  return (
    <div>
      <Popover
        isOpen={loggedOpen}
        shouldCloseOnInteractOutside={(element) => {
          console.log("OUTSIDE");
          const trigger = triggerRef?.current;

          if (!trigger || !trigger.contains(element)) {
            setLoggedOpen(false);
            return false;
          }
          return true;
        }}
      >
        <PopoverTrigger
          onClick={() => {
            console.log("change from", loggedOpen, "to", !loggedOpen);
            setLoggedOpen((o) => !o);
          }}
        >
          <span ref={triggerRef} style={{ cursor: "pointer" }}>
            BADGE
          </span>
        </PopoverTrigger>
        <PopoverContent>
          <div className="px-1 py-2 container-column gap-1">
            <div>MAIL</div>
            <div className="text-warning font-bold">
              You have not set nickname yet.
            </div>
            <Button
              color="warning"
              className="text-small"
              onClick={() => {
                console.log("CLICKED");
                setLoggedOpen(false);
              }}
            >
              Set Nickname
            </Button>
          </div>
        </PopoverContent>
      </Popover>
    </div>
  );
}

[Berdugo1994]

Thanks a lot, that sort it out!

[kamami]

How can I make this work with backdrop="opaque"?
The popover does not disappear when clicking outside anymore.