Skip to content

Conversation

@Han5991
Copy link
Contributor

@Han5991 Han5991 commented Apr 21, 2025

🔧 Summary

Fixes an issue where the FloatingIndicator in SegmentedControl does not re-render when the data prop changes in length.


🐞 Problem

Previously, the useShallowEffect responsible for triggering re-renders was dependent on the data array reference:

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

✅ Fix

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

This ensures proper re-rendering when the number of segments changes.

📎 Context

This change is especially helpful in cases where the data array is dynamically built (e.g. from user input or async responses), and the reference remains stable despite changes in content.

Fixes #7717

Han5991 and others added 3 commits April 22, 2025 06:21
…gth changes mantinedev#7717

- Updated useShallowEffect dependency from `data` to `data.length`
  to ensure indicator re-renders correctly even if the reference to
  the same data array is preserved
@rtivital rtivital merged commit 0163604 into mantinedev:master Apr 24, 2025
1 check passed
@rtivital
Copy link
Member

Thanks!

@Han5991 Han5991 deleted the feature/fix-segmented-control-animation branch June 22, 2025 10:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

SegmentedControl is not working with animation in controlled mode.

2 participants