fix: fix Button findDOMNode error (ant-design#48830)

* fix: fix Button findDOMNode error * test: update test case * fix: optimize code * Update components/_util/wave/WaveEffect.tsx Co-authored-by: lijianan <[email protected]> Signed-off-by: Wanpan <[email protected]> * fix: optimize code * fix: update test * fix: update test --------- Signed-off-by: Wanpan <[email protected]> Co-authored-by: lijianan <[email protected]>
SongYeongEng · May 10, 2024 · c3cf0de · c3cf0de
1 parent cf6e9c8
commit c3cf0de
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/components/_util/__tests__/wave.test.tsx b/components/_util/__tests__/wave.test.tsx
@@ -80,6 +80,7 @@ describe('Wave component', () => {
   }
 
   it('work', async () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
     const { container, unmount } = render(
       <Wave>
         <button type="button">button</button>
@@ -95,6 +96,8 @@ describe('Wave component', () => {
 
     expect(document.querySelector('.ant-wave')).toBeFalsy();
 
+    expect(errorSpy).not.toHaveBeenCalled();
+
     unmount();
   });
 

diff --git a/components/_util/wave/WaveEffect.tsx b/components/_util/wave/WaveEffect.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
 import raf from 'rc-util/lib/raf';
 import { render, unmount } from 'rc-util/lib/React/render';
+import { composeRef } from 'rc-util/es/ref';
 
 import { TARGET_CLS } from './interface';
 import type { ShowWaveEffect } from './interface';
@@ -20,7 +21,7 @@ export interface WaveEffectProps {
 
 const WaveEffect: React.FC<WaveEffectProps> = (props) => {
   const { className, target, component } = props;
-  const divRef = React.useRef<HTMLDivElement>(null);
+  const divRef = React.useRef<HTMLDivElement | null>(null);
 
   const [color, setWaveColor] = React.useState<string | null>(null);
   const [borderRadius, setBorderRadius] = React.useState<number[]>([]);
@@ -125,9 +126,9 @@ const WaveEffect: React.FC<WaveEffectProps> = (props) => {
         return false;
       }}
     >
-      {({ className: motionClassName }) => (
+      {({ className: motionClassName }, ref) => (
         <div
-          ref={divRef}
+          ref={composeRef(divRef, ref)}
           className={classNames(
             className,
             {