Menu component is not opening when it is controlled

[denizguzel]

What package has an issue

@mantine/core

Describe the bug

I believe this bug introduced with this pull request but I'm not sure exactly. #2646

In default state Menu is working fine but when I make it controlled like this example https://mantine.dev/core/menu/#controlled, Menu component doesn't open anymore.

Minimal reproduction link is attached.

What version of @mantine/hooks page do you have in package.json?

5.5.5

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/s/pedantic-chatterjee-zf560c

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No

Possible fix

No response

[denizguzel]

Instead of doing this

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

<Menu opened={opened} onChange={setOpened}>
  <Menu.Target>
    <Button>Toggle menu</Button>
  </Menu.Target>

  <Menu.Dropdown>
    <Menu.Label>Application</Menu.Label>
    <Menu.Divider />
    <Menu.Label>Danger zone</Menu.Label>
  </Menu.Dropdown>
</Menu>

I refactored the code like this and it works now.

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

const handleMenuToggle = () => {
  setOpened((prev) => !prev);
};

<Menu opened={opened}>
  <Menu.Target>
    <Button onClick={handleMenuToggle}>Toggle menu</Button>
  </Menu.Target>

  <Menu.Dropdown>
    <Menu.Label>Application</Menu.Label>
    <Menu.Divider />
    <Menu.Label>Danger zone</Menu.Label>
  </Menu.Dropdown>
</Menu>

I don't know if it was a bug or not, but closing the issue for now. Thanks