[Popover] How to close a controlled Popover when click outside?

[tacit field]

Is there a way to assign a custom handler when click outside a controlled Popover?

const SimplePopOver: FunctionComponent<SimplePopOverProps> = ({
  defaultOpen = false,
  renderToggler,
  renderContent,
  ...props
}) => {
  const [isOpen, { toggle, open }] = useDisclosure(defaultOpen);
  return (
    <Popover opened={isOpen} {...props}>
      <Popover.Target>{renderToggler({ toggle, open })}</Popover.Target>
      <Popover.Dropdown>{renderContent({ toggle, open })}</Popover.Dropdown>
    </Popover>
  );
};

[fervent viper]

https://mantine.dev/hooks/use-click-outside/

[tacit field]

I know this hook, but Popover already implements click outside logic internally. There's already a prop for uncontrolled cases, I'd like to know is there a way to do that with controlled cases.

[fervent viper]

I guess you can use clickOutsideEvents and fire a custom event.

[fresh vault]

@tacit field Hi is it possible that you are trying to create similar behavior like this?
https://discord.com/channels/854810300876062770/1022395474545758238

[tacit field]

@fresh vault not exactly. I recorded my case, I simply want to close one Popover when I click outside of it.
The Popover is controlled, i.e. opened state must be changed to false to close it, I don't know how to pass the handler when click outside

[cosmic copper]

const [opened, setOpened] = useState(false);
const ref = useClickOutside(() => setOpened(false));

<Popover opened={opened}>
  ...
  <Popover.Dropdown>
    <div ref={ref}>

[cosmic copper]

^

But as mentioned, you should use Hovercard so that it is accessible. Nvm, I'm wrong and going slightly insane

[fresh vault]

I did also tried to reproduce, and was slightly going insane also lol
What i've gone through was, the useClickOutside is fired before clicking another popover

[cosmic copper]

I meant that I was wrong about Hovercard being accessible (I misremembered that from a different question). I did test my code snippet so it should work.

[fresh vault]

Nice, I might need to look on HoverCard also 👀

[cosmic copper]

Sounds good. To clarify, Hovercard is NOT accessible while Popover is

[tacit field]

Honestly, I don't know how to use this prop. Do you have any examples?

[cosmic copper]

I don't think you need that prop if I understand you correctly. The prop clickOutsideEvents allows you to filter which of mouseup or mousedown or pointerup or pointerdown hides the popover for an uncontrolled example.

For a controlled popover, you need to do something like in my code snippet. useClickOutside is a hook provided by the @mantine/hooks package.

[analog iris]

Clicking <Tooltip.Target> will trigger the function inside useClickOutside which will close the popover and reopen it immediately

Which won't enable you to close the popover by clicking the Target again

Which I don't think is a good UX