From 8e1eae686b106bcaea81a5738adcd669899ccf31 Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Tue, 27 Feb 2024 14:59:17 +0800
Subject: [PATCH] Use useTimeout

---
 .../unstable_useNumberInput/useNumberInput.ts   | 17 +++++++++--------
 .../useNumberInput2.test.tsx                    |  9 +++++----
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.ts b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.ts
index 353067fb03..1f686e5566 100644
--- a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.ts
+++ b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.ts
@@ -1,7 +1,11 @@
 'use client';
 import * as React from 'react';
 import MuiError from '@mui/internal-babel-macros/MuiError.macro';
-import { unstable_useForkRef as useForkRef, unstable_useId as useId } from '@mui/utils';
+import {
+  unstable_useForkRef as useForkRef,
+  unstable_useId as useId,
+  unstable_useTimeout as useTimeout,
+} from '@mui/utils';
 import { extractEventHandlers } from '../utils/extractEventHandlers';
 import { MuiCancellableEvent } from '../utils/MuiCancellableEvent';
 import { useControllableReducer } from '../utils/useControllableReducer';
@@ -82,8 +86,7 @@ export function useNumberInput(parameters: UseNumberInputParameters): UseNumberI
     }
   }, []);
 
-  const timeoutRef = React.useRef<number>();
-  const clearTimeoutRef = () => window.clearTimeout(timeoutRef.current);
+  const holdTimer = useTimeout();
 
   const inputRef = React.useRef<HTMLInputElement>(null);
   const handleInputRef = useForkRef(inputRef, inputRefProp, handleInputRefWarning);
@@ -407,18 +410,16 @@ export function useNumberInput(parameters: UseNumberInputParameters): UseNumberI
     actionType: typeof NumberInputActionTypes.increment | typeof NumberInputActionTypes.decrement;
     event: React.PointerEvent;
   }) => {
-    clearTimeoutRef();
-
     const { actionType, event } = payload;
 
-    timeoutRef.current = window.setTimeout(() => {
+    holdTimer.start(100, () => {
       dispatch({
         type: actionType,
         event,
         applyMultiplier: !!event.shiftKey,
       });
       recurse({ actionType, event });
-    }, 100);
+    });
   };
 
   const handleStepperButtonMouseDown =
@@ -438,7 +439,7 @@ export function useNumberInput(parameters: UseNumberInputParameters): UseNumberI
     };
 
   const handleStepperButtonMouseUp = () => {
-    clearTimeoutRef();
+    holdTimer.clear();
   };
 
   const stepperButtonCommonProps = {
diff --git a/packages/mui-base/src/unstable_useNumberInput/useNumberInput2.test.tsx b/packages/mui-base/src/unstable_useNumberInput/useNumberInput2.test.tsx
index 019ab4ea07..a1f2098578 100644
--- a/packages/mui-base/src/unstable_useNumberInput/useNumberInput2.test.tsx
+++ b/packages/mui-base/src/unstable_useNumberInput/useNumberInput2.test.tsx
@@ -29,13 +29,14 @@ describe('useNumberInput2', () => {
 
       const incrementBtn = screen.getByTestId('incrementBtn');
 
-      fireEvent.mouseDown(incrementBtn);
+      fireEvent.mouseDown(incrementBtn); // onChange x1
 
-      clock.tick(100);
-      clock.tick(100);
+      clock.tick(100); // onChange x2
+      clock.tick(100); // onChange x3
+      clock.tick(100); // onChange x4
       clock.runToLast();
 
-      expect(handleChange.callCount).to.equal(3);
+      expect(handleChange.callCount).to.equal(4);
     });
   });
 });