fix: compose existing child refs in CSSMotion

Author: QDyanbing

src/CSSMotion.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/default-props-match-prop-types, react/no-multi-comp, react/prop-types */
 import { getDOM } from '@rc-component/util/lib/Dom/findDOMNode';
-import { getNodeRef, supportRef } from '@rc-component/util/lib/ref';
+import { composeRef, getNodeRef, supportRef } from '@rc-component/util/lib/ref';
 import { clsx } from 'clsx';
 import * as React from 'react';
 import { useRef } from 'react';
@@ -253,14 +253,12 @@ export function genCSSMotion(config: CSSMotionConfig) {
         ) {
           const originNodeRef = getNodeRef(motionChildren);
 
-          if (!originNodeRef) {
-            motionChildren = React.cloneElement(
-              motionChildren as React.ReactElement,
-              {
-                ref: nodeRef,
-              },
-            );
-          }
+          motionChildren = React.cloneElement(
+            motionChildren as React.ReactElement,
+            {
+              ref: originNodeRef ? composeRef(originNodeRef, nodeRef) : nodeRef,
+            },
+          );
         }
 
         return motionChildren;

tests/CSSMotion.spec.tsx

@@ -942,6 +942,51 @@ describe('CSSMotion', () => {
 
       expect(ReactDOM.findDOMNode).not.toHaveBeenCalled();
     });
+
+    it('supports existing child refs for motion end', () => {
+      const motionRef = React.createRef<CSSMotionRef>();
+      const childRef = React.createRef<HTMLDivElement>();
+
+      const Demo = ({ visible }: { visible: boolean }) => (
+        <CSSMotion
+          motionName="transition"
+          motionAppear={false}
+          visible={visible}
+          ref={motionRef}
+        >
+          {({ style, className }) => (
+            <div
+              ref={childRef}
+              style={style}
+              className={clsx('motion-box', className)}
+            />
+          )}
+        </CSSMotion>
+      );
+
+      const { container, rerender } = render(<Demo visible />);
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      expect(motionRef.current.nativeElement).toBe(childRef.current);
+
+      rerender(<Demo visible={false} />);
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      fireEvent.transitionEnd(childRef.current!);
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      expect(container.querySelector('.motion-box')).toBeFalsy();
+      expect(ReactDOM.findDOMNode).not.toHaveBeenCalled();
+    });
   });
 
   describe('onVisibleChanged', () => {