fix: solve the issue that input-number's value auto change after fast click step handle in safari (#585)

* fix: solve the issue that input-number's value auto change after fast click step handle in safari

* feat: add test case

Author: kiner-tang

src/StepHandler.tsx

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import useMobile from 'rc-util/lib/hooks/useMobile';
+import raf from 'rc-util/lib/raf';
 
 /**
  * When click and hold on a button - the speed of auto changing the value.
@@ -32,13 +33,20 @@ export default function StepHandler({
 }: StepHandlerProps) {
   // ======================== Step ========================
   const stepTimeoutRef = React.useRef<any>();
+  const frameIds = React.useRef<number[]>([]);
 
   const onStepRef = React.useRef<StepHandlerProps['onStep']>();
   onStepRef.current = onStep;
 
+  const onStopStep = () => {
+    clearTimeout(stepTimeoutRef.current);
+  };
+
+
   // We will interval update step when hold mouse down
   const onStepMouseDown = (e: React.MouseEvent, up: boolean) => {
     e.preventDefault();
+    onStopStep();
 
     onStepRef.current(up);
 
@@ -53,11 +61,10 @@ export default function StepHandler({
     stepTimeoutRef.current = setTimeout(loopStep, STEP_DELAY);
   };
 
-  const onStopStep = () => {
-    clearTimeout(stepTimeoutRef.current);
-  };
-
-  React.useEffect(() => onStopStep, []);
+  React.useEffect(() => () => {
+    onStopStep();
+    frameIds.current.forEach(id => raf.cancel(id));
+  }, []);
 
   // ======================= Render =======================
   const isMobile = useMobile();
@@ -74,11 +81,18 @@ export default function StepHandler({
     [`${handlerClassName}-down-disabled`]: downDisabled,
   });
 
+  // fix: https://github.com/ant-design/ant-design/issues/43088
+  // In Safari, When we fire onmousedown and onmouseup events in quick succession, 
+  // there may be a problem that the onmouseup events are executed first, 
+  // resulting in a disordered program execution.
+  // So, we need to use requestAnimationFrame to ensure that the onmouseup event is executed after the onmousedown event.
+  const safeOnStopStep = () => frameIds.current.push(raf(onStopStep));
+
   const sharedHandlerProps = {
     unselectable: 'on' as const,
     role: 'button',
-    onMouseUp: onStopStep,
-    onMouseLeave: onStopStep,
+    onMouseUp: safeOnStopStep,
+    onMouseLeave: safeOnStopStep,
   };
 
   return (

tests/longPress.test.tsx

@@ -35,4 +35,36 @@ describe('InputNumber.LongPress', () => {
     });
     await waitFor(() => expect(onChange).toHaveBeenCalledWith(14));
   });
+
+  it('Simulates event calls out of order in Safari', async () => {
+    const onChange = jest.fn();
+    const { container } = render(<InputNumber defaultValue={20} onChange={onChange} />);
+    fireEvent.mouseDown(container.querySelector('.rc-input-number-handler-up'));
+    act(() => {
+      jest.advanceTimersByTime(10);
+    });
+    fireEvent.mouseUp(container.querySelector('.rc-input-number-handler-up'));
+    act(() => {
+      jest.advanceTimersByTime(10);
+    });
+    fireEvent.mouseUp(container.querySelector('.rc-input-number-handler-up'));
+    act(() => {
+      jest.advanceTimersByTime(10);
+    });
+    fireEvent.mouseDown(container.querySelector('.rc-input-number-handler-up'));
+    act(() => {
+      jest.advanceTimersByTime(10);
+    });
+    fireEvent.mouseDown(container.querySelector('.rc-input-number-handler-up'));
+    act(() => {
+      jest.advanceTimersByTime(10);
+    });
+    fireEvent.mouseUp(container.querySelector('.rc-input-number-handler-up'));
+
+    act(() => {
+      jest.advanceTimersByTime(600 + 200 * 5 + 100);
+    });
+
+    await waitFor(() => expect(onChange).toBeCalledTimes(3));
+  });
 });