Hide parent popover panel when opening nested popover panel.

[nxnxu]

I am creating a popover which has nested popovers. When a nested popover is clicked I set a state to hide the root panel. I have a back button on the nested panel which closes the panel and makes the root panel visible.

Now the problem is if I click anywhere outside the nested panel it gets automatically closed and I am not able to set the state to make root panel visible. I think one way to fix this is by using static and manage my own open/close state. Are there any better ways ?

[nxnxu]

I used open render prop on parent to solve this.

function MyPopover() {
  const items = ["Analytics", "Engagement", "Security", "Integrations"];
  const [hide, setHide] = useState(false);

  return (
    <Popover className={'m-4 relative p-2 bg-red-400'}>
      {({ open }) => {
        if (!open)
          setTimeout(() => setHide(false));
        return <>
          <Popover.Button>Parent</Popover.Button>
          <Popover.Panel className={classNames("absolute top-10 z-10 bg-cyan-400 p-2", { "invisible": hide })}>
            {items.map((item, index) => (
              <Popover key={index}>
                <Popover.Button onClick={() => setHide(true)}>{`Child Popover ${index}`}</Popover.Button>
                <Popover.Panel className="visible absolute top-0 left-0 z-10 bg-blue-400 p-2">
                  <Popover.Button onClick={() => setHide(false)}>Back</Popover.Button>
                  <div className="flex flex-col">
                    <a href="#">{item}</a>
                  </div>
                </Popover.Panel>
              </Popover>
            ))}
          </Popover.Panel >
        </>
      }}
    </Popover >

  )
}