SegmentedControl transition animation gives Null TypeError when using data that is a dynamic list

[r134x7]

What package has an issue

@mantine/core

Describe the bug

I am currently using: "@mantine/core": "^5.10.2".

I discovered the issue when making changes to a navigation component.

This is the component it affected:
` /**/

                  <SegmentedControl
                    fullWidth 
                    orientation="vertical"
                    value={value}
                    onChange={setValue}
                    data={dataList}
                />

`

The dataList variable is a dynamic list, when the last element in the dataList changes because the context of the data I am looking at has changed, e.g. changed to a different year. That's when it breaks.

To reproduce the steps with an example, you have a segmented control with three buttons, you have clicked the last button and SegmentedControl will highlight that last button. When the context of the data changes and suddenly the list has two buttons the whole thing breaks because the highlighted button no longer exists and the animation for the highlighted button has nowhere to go.

That then causes this error: Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
at SegmentedControl.tsx:131:35

at line 135 is: transitionTimingFunction, and that is of type string.

I have already implemented a temporary fix for my issue by using the following seen in the image below. How it works: If the dynamic list called dataList changes and the value cannot be found in that dataList, then the delayedReset() function will run. It uses a setTimeout with an arbitrary timer set. This setTimeout means that delayeReset() will return undefined first so that SegmentedControl is removed from the DOM and then the setTimeout goes off and then does setValue(""). Due to the recursive nature of setValue, the setTimeout is necessary to allow delayedReset() to change the DOM by returning undefined before setValue does.

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

"@mantine/hooks": "^5.10.2",

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

https://codesandbox.io/s/determined-dhawan-cvyzhe

Do you know how to fix the issue

Yes

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

No

Possible fix

I have already described how I fixed the issue for myself in the "Describe the bug" section with the image posted but the solution might be much easier by dealing with null values when the animation transition occurs.

The codesandbox I linked only reproduces the problem.

[yverby]

Also a possible solution is to reset the state if the value is not in your data list
https://codesandbox.io/s/hungry-mestorf-wpnr1m

[rtivital]

The issue is resolved in 7.0.1