Bad interaction between FloatingIndicator and compound Modal components

[alexis-exaud]

Dependencies check up

• 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.2

What package has an issue?

@mantine/core

What framework do you use?

Vite

In which browsers you can reproduce the issue?

All

Describe the bug

When a FloatingIndicator is placed inside a normal <Modal /> component, things work fine, but when it's placed inside compound Modal components (e.g. <Modal.Body />) the floating indicator doesn't fill the control component on first render. This happens regardless of the nesting level of FloatingIndicator.

After the active index is changed for the first time, it sorts itself out, but the first render is always bugged.

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

https://codesandbox.io/p/sandbox/mantine-modal-and-floatingindicator-issue-nd6qyt

Possible fix

No response

Self-service

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

[rtivital]

The issue is with the transition used by Modal.Root component, by default that transition was set to pop which included scale transform. Scale transforms are incompatible with FloatingIndicator and SegmentedControl components (this issue cannot be resolved). If you are planning to use such components in your Modal.Root, you need to update transition to fade-down or other value that does not include scaling transform.

I've updated the default transition value for Modal.Root to fade-down to match the modal component, it will be available with the next 7.13.3 patch release.

[rtivital]

Fixed in 7.13.3