SegmentedControl is not working with animation in controlled mode.

[robin-dongbin]

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.17.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

SegmentedControl is not working with animation in controlled mode on 7.17.4
7.16.0 is ok

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

https://codesandbox.io/p/sandbox/mantine-react-template-forked-ksyxl6?file=%2Fsrc%2FApp.tsx%3A19%2C11

Possible fix

No response

Self-service

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

[Han5991]

@rtivital
Can I fix it?

Changing the dependency of useShallowEffect to data.length:

useShallowEffect(() => {
  setKey(randomId());
}, [data.length]);

fixes the indicator animation issue.

This ensures that the FloatingIndicator re-renders with a new key only when the number of items changes (i.e. when an item is added or removed). Since the indicator’s position depends on the selected item’s ref, a fresh key forces a remount and recalculates the position correctly. In this context, using data.length is a minimal and effective dependency.

cc: mantinedev/mantine#7615

[rtivital]

Sure, you are welcome to submit a PR with a fix

[atumas-bananamilk]

We can confirm the animation is broken for us also on 7.17.4.