[NumberInput] Hold stepper buttons to continuously change value

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,6 +86,8 @@ export function useNumberInput(parameters: UseNumberInputParameters): UseNumberI
     }
   }, []);
 
+  const holdTimer = useTimeout();
+
   const inputRef = React.useRef<HTMLInputElement>(null);
   const handleInputRef = useForkRef(inputRef, inputRefProp, handleInputRefWarning);
 
@@ -400,12 +406,40 @@ export function useNumberInput(parameters: UseNumberInputParameters): UseNumberI
     };
   };
 
-  const handleStepperButtonMouseDown = (event: React.PointerEvent) => {
-    event.preventDefault();
+  const recurse = (payload: {
+    actionType: typeof NumberInputActionTypes.increment | typeof NumberInputActionTypes.decrement;
+    event: React.PointerEvent;
+  }) => {
+    const { actionType, event } = payload;
 
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
+    holdTimer.start(100, () => {
+      dispatch({
+        type: actionType,
+        event,
+        applyMultiplier: !!event.shiftKey,
+      });
+      recurse({ actionType, event });
+    });
+  };
+
+  const handleStepperButtonMouseDown =
+    (direction: StepDirection) => (event: React.PointerEvent) => {
+      event.preventDefault();
+
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+
+      const actionType = {
+        up: NumberInputActionTypes.increment,
+        down: NumberInputActionTypes.decrement,
+      }[direction];
+
+      recurse({ actionType, event });
+    };
+
+  const handleStepperButtonMouseUp = () => {
+    holdTimer.clear();
   };
 
   const stepperButtonCommonProps = {
@@ -424,7 +458,8 @@ export function useNumberInput(parameters: UseNumberInputParameters): UseNumberI
       ...stepperButtonCommonProps,
       disabled: isIncrementDisabled,
       'aria-disabled': isIncrementDisabled,
-      onMouseDown: handleStepperButtonMouseDown,
+      onMouseDown: handleStepperButtonMouseDown('up'),
+      onMouseUp: handleStepperButtonMouseUp,
       onClick: handleStep('up'),
     };
   };
@@ -440,7 +475,8 @@ export function useNumberInput(parameters: UseNumberInputParameters): UseNumberI
       ...stepperButtonCommonProps,
       disabled: isDecrementDisabled,
       'aria-disabled': isDecrementDisabled,
-      onMouseDown: handleStepperButtonMouseDown,
+      onMouseDown: handleStepperButtonMouseDown('down'),
+      onMouseUp: handleStepperButtonMouseUp,
       onClick: handleStep('down'),
     };
   };

packages/mui-base/src/unstable_useNumberInput/useNumberInput2.test.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { spy } from 'sinon';
+import { createRenderer, screen, fireEvent } from '@mui/internal-test-utils';
+import { unstable_useNumberInput as useNumberInput } from '@mui/base/unstable_useNumberInput';
+
+describe('useNumberInput2', () => {
+  const { clock, render } = createRenderer();
+
+  describe('press and hold', () => {
+    clock.withFakeTimers();
+
+    it('should call onChange continuously', () => {
+      const handleChange = spy();
+      function NumberInput(props: { defaultValue: number }) {
+        const { getInputProps, getIncrementButtonProps } = useNumberInput({
+          ...props,
+          onChange: handleChange,
+        });
+
+        return (
+          <div role="group">
+            <button {...getIncrementButtonProps()} data-testid="incrementBtn" />
+            <input data-testid="test-input" {...getInputProps()} />
+          </div>
+        );
+      }
+      render(<NumberInput defaultValue={0} />);
+
+      const incrementBtn = screen.getByTestId('incrementBtn');
+
+      fireEvent.mouseDown(incrementBtn); // onChange x1
+
+      clock.tick(100); // onChange x2
+      clock.tick(100); // onChange x3
+      clock.tick(100); // onChange x4
+      clock.runToLast();
+
+      expect(handleChange.callCount).to.equal(4);
+    });
+  });
+});