fix(Collapse): end motion when set activeKey while hiding (#30555)

components/_util/motion.tsx

@@ -1,11 +1,12 @@
 import { CSSMotionProps, MotionEventHandler, MotionEndEventHandler } from 'rc-motion';
+import { MotionEvent } from 'rc-motion/lib/interface';
 
 // ================== Collapse Motion ==================
 const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });
 const getRealHeight: MotionEventHandler = node => ({ height: node.scrollHeight, opacity: 1 });
 const getCurrentHeight: MotionEventHandler = node => ({ height: node.offsetHeight });
-const skipOpacityTransition: MotionEndEventHandler = (_, event) =>
+const skipOpacityTransition: MotionEndEventHandler = (_, event: MotionEvent) =>
-  (event as TransitionEvent).propertyName === 'height';
+  event?.deadline === true || (event as TransitionEvent).propertyName === 'height';
 
 const collapseMotion: CSSMotionProps = {
   motionName: 'ant-motion-collapse',

components/collapse/__tests__/index.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import { sleep } from '../../../tests/utils';
 import { resetWarned } from '../../_util/devWarning';
 
@@ -101,4 +102,39 @@ describe('Collapse', () => {
     wrapper.find('.ant-collapse-header').simulate('click');
     expect(wrapper.find('.ant-collapse-item-active').length).toBe(0);
   });
+
+  it('should end motion when set activeKey while hiding', async () => {
+    jest.useFakeTimers();
+    jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => {
+      setTimeout(cb, 16.66);
+    });
+
+    let setActiveKeyOuter;
+    const Test = () => {
+      const [activeKey, setActiveKey] = React.useState();
+      setActiveKeyOuter = setActiveKey;
+      return (
+        <div hidden>
+          <Collapse activeKey={activeKey}>
+            <Collapse.Panel header="header" key="1">
+              content
+            </Collapse.Panel>
+          </Collapse>
+        </div>
+      );
+    };
+
+    const wrapper = mount(<Test />);
+
+    await act(async () => {
+      setActiveKeyOuter('1');
+      await Promise.resolve();
+      jest.runAllTimers();
+    });
+
+    expect(wrapper.render().find('.ant-motion-collapse').length).toBe(0);
+
+    window.requestAnimationFrame.mockRestore();
+    jest.useRealTimers();
+  });
 });