From c721031b2c6f66ec388b582beaa98412139029a5 Mon Sep 17 00:00:00 2001
From: luo3house <96865086+luo3house@users.noreply.github.com>
Date: Mon, 16 Jan 2023 03:47:57 +0000
Subject: [PATCH 1/4] fix: end animation when element is hidden

---
 src/MotionThumb.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/MotionThumb.tsx b/src/MotionThumb.tsx
index 9527e24..6853c50 100644
--- a/src/MotionThumb.tsx
+++ b/src/MotionThumb.tsx
@@ -55,7 +55,7 @@ export default function MotionThumb(props: MotionThumbInterface) {
       `.${prefixCls}-item`,
     )[index];
 
-    return ele;
+    return ele?.offsetParent && ele;
   };
 
   const [prevStyle, setPrevStyle] = React.useState<ThumbReact>(null);

From 5d95e3b972c05da32d608a176b71818b97aee637 Mon Sep 17 00:00:00 2001
From: luo3house <96865086+luo3house@users.noreply.github.com>
Date: Mon, 16 Jan 2023 10:29:24 +0000
Subject: [PATCH 2/4] chore: fix test

---
 tests/index.test.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 9185fc9..df3d745 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -1,5 +1,5 @@
+import { act, fireEvent, render } from '@testing-library/react';
 import * as React from 'react';
-import { render, act, fireEvent } from '@testing-library/react';
 import Segmented from '../src';
 
 jest.mock('rc-motion/lib/util/motion', () => {
@@ -250,6 +250,9 @@ describe('rc-segmented', () => {
       );
     };
     const { container } = render(<Demo />);
+    Object.defineProperty(HTMLElement.prototype, 'offsetParent', {
+      get: () => container,
+    });
     fireEvent.click(container.querySelectorAll('.rc-segmented-item-input')[0]);
     expect(container.querySelector('.value')?.textContent).toBe('iOS');
 

From e0bb13df7db018176657263881e50ab5b60de8dd Mon Sep 17 00:00:00 2001
From: luo3house <96865086+luo3house@users.noreply.github.com>
Date: Tue, 17 Jan 2023 03:35:25 +0000
Subject: [PATCH 3/4] chore: add test

---
 tests/index.test.tsx | 49 +++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 46 insertions(+), 3 deletions(-)

diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index df3d745..adfa19f 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -231,6 +231,12 @@ describe('rc-segmented', () => {
   });
 
   it('render segmented with controlled mode', () => {
+    const offsetParentSpy = jest
+      .spyOn(HTMLElement.prototype, 'offsetParent', 'get')
+      .mockImplementation(() => {
+        return container;
+      });
+
     const Demo = () => {
       const options = ['iOS', 'Android', 'Web3'];
 
@@ -250,9 +256,7 @@ describe('rc-segmented', () => {
       );
     };
     const { container } = render(<Demo />);
-    Object.defineProperty(HTMLElement.prototype, 'offsetParent', {
-      get: () => container,
-    });
+
     fireEvent.click(container.querySelectorAll('.rc-segmented-item-input')[0]);
     expect(container.querySelector('.value')?.textContent).toBe('iOS');
 
@@ -287,10 +291,17 @@ describe('rc-segmented', () => {
 
     // invalid changes: Should not active any item to make sure it's single source of truth
     expect(container.querySelector('.rc-segmented-item-selected')).toBeFalsy();
+
+    offsetParentSpy.mockRestore();
   });
 
   describe('render segmented with CSSMotion', () => {
     it('basic', () => {
+      const offsetParentSpy = jest
+        .spyOn(HTMLElement.prototype, 'offsetParent', 'get')
+        .mockImplementation(() => {
+          return container;
+        });
       const handleValueChange = jest.fn();
       const { container, asFragment } = render(
         <Segmented
@@ -369,9 +380,16 @@ describe('rc-segmented', () => {
 
       // thumb should disappear
       expect(container.querySelector('.rc-segmented-thumb')).toBeFalsy();
+
+      offsetParentSpy.mockRestore();
     });
 
     it('quick switch', () => {
+      const offsetParentSpy = jest
+        .spyOn(HTMLElement.prototype, 'offsetParent', 'get')
+        .mockImplementation(() => {
+          return container;
+        });
       const { container } = render(
         <Segmented
           options={['IOS', 'Android', 'Web3']}
@@ -406,6 +424,31 @@ describe('rc-segmented', () => {
         '--thumb-active-left': '0px',
         '--thumb-active-width': '62px',
       });
+
+      offsetParentSpy.mockRestore();
+    });
+
+    it('stop animation early in hidden parent', () => {
+      const offsetParentSpy = jest
+        .spyOn(HTMLElement.prototype, 'offsetParent', 'get')
+        .mockImplementation(() => null);
+      const Demo = () => {
+        const [value, setValue] = React.useState<any>('iOS');
+        React.useEffect(() => setValue('Web3'), []);
+        return <Segmented options={['iOS', 'Android', 'Web3']} value={value} />;
+      };
+
+      const { container } = render(<Demo />);
+
+      // stop animation early and place "selected" class
+      expect(container.querySelectorAll('.rc-segmented-item')[2]).toHaveClass(
+        'rc-segmented-item-selected',
+      );
+
+      // thumb should disappear
+      expect(container.querySelector('.rc-segmented-thumb')).toBeFalsy();
+
+      offsetParentSpy.mockRestore();
     });
   });
 

From 8bb159e959f8b5862829d4fb85c92a1b063a2e2d Mon Sep 17 00:00:00 2001
From: vagusX <vagusX@users.noreply.github.com>
Date: Tue, 17 Jan 2023 14:58:58 +0800
Subject: [PATCH 4/4] Update tests/index.test.tsx

---
 tests/index.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index adfa19f..fc8a6eb 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -433,7 +433,7 @@ describe('rc-segmented', () => {
         .spyOn(HTMLElement.prototype, 'offsetParent', 'get')
         .mockImplementation(() => null);
       const Demo = () => {
-        const [value, setValue] = React.useState<any>('iOS');
+        const [value, setValue] = React.useState<string>('iOS');
         React.useEffect(() => setValue('Web3'), []);
         return <Segmented options={['iOS', 'Android', 'Web3']} value={value} />;
       };