mantinedev / mantine

A fully featured React components library
https://mantine.dev
MIT License
26.79k stars 1.9k forks source link

Controlled popover doesn't close on click away #7079

Closed stuymedova closed 1 week ago

stuymedova commented 1 week ago

Dependencies check up

What version of @mantine/* packages do you have in package.json?

7.13.4

What package has an issue?

@mantine/core

What framework do you use?

Vite

In which browsers you can reproduce the issue?

Chrome

Describe the bug

I expect onClose to get called on click outside, but it doesn't happen. Repro (taken from the docs and adjusted slightly):

function Demo() {
  const [opened, { close, toggle }] = useDisclosure(false);

  return (
    <Popover
        width={200}
        position="bottom"
        withArrow={true}
        shadow="md"
        opened={opened}
        closeOnClickOutside={true}
        closeOnEscape={true}
        onClose={() => {
            console.log('ok'); // on click outside onClose doesn't get called, nothing gets printed!
            close();
        }}
    >
        <Popover.Target>
            <Button onClick={toggle}>
                {'Click to see popover'}
            </Button>
        </Popover.Target>
        <Popover.Dropdown style={{ pointerEvents: 'none' }}>
            <Text size="sm">{'This popover is shown when user clicks the target element'}</Text>
        </Popover.Dropdown>
    </Popover>
  );
}

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

No response

Self-service

rtivital commented 1 week ago

Duplicate of https://github.com/mantinedev/mantine/issues/7019 See the linked issue to learn more