Position of popovers contained within button group can break when clicking inside popover.

[linuspahl]

Dependencies check up

• [X] I have verified that I use latest version of all @mantine/* packages

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

7.13.3

What package has an issue?

@mantine/core

What framework do you use?

create-react-app (CRA)

In which browsers you can reproduce the issue?

All

Describe the bug

In my case I have a simple Button.Group, which contains a Menu. The menu dropdown is not rendered within a portal (withinPortal={false}).

When I click on the menu dropdown instead of a menu item, the position of the dropdown changes. The same problem exists for other popovers like the Popover component.

The reason seems to be that the button group has the following styling, which effects all focused child elements:

.m_80d6d844 :where(*):focus {
    position: relative;
    z-index: 1;
}

This overrides the position: absolute; of the popover.

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

https://codesandbox.io/p/sandbox/mantine-react-template-forked-24mzvw?file=%2Fsrc%2FApp.tsx%3A25%2C1

Possible fix

No response

Self-service

• [ ] I would be willing to implement a fix for this issue

[linuspahl]

A fix could be to define a more specific CSS selector, but I am not sure how the ideal selector should look like.

[vishal590]

I cam silver this issue. Can someone assign me?