[number field] Stop incrementing when disabled during press-and-hold

packages/react/src/internals/usePressAndHold.ts

@@ -169,6 +169,12 @@ export function usePressAndHold(params: UsePressAndHoldParameters): UsePressAndH
     [stopAutoChange],
   );
 
+  React.useEffect(() => {
+    if (disabled) {
+      stopAutoChange();
+    }
+  }, [disabled, stopAutoChange]);
+
   const pointerHandlers: UsePressAndHoldReturnValue['pointerHandlers'] = {
     onTouchStart() {
       isTouchingButtonRef.current = true;

packages/react/src/number-field/increment/NumberFieldIncrement.test.tsx

@@ -306,6 +306,42 @@ describe('<NumberField.Increment />', () => {
       expect(input).toHaveValue('4');
     });
 
+    it('stops an active press-and-hold interaction when disabled', async () => {
+      function App() {
+        const [disabled, setDisabled] = React.useState(false);
+
+        return (
+          <NumberField.Root defaultValue={0} disabled={disabled}>
+            <NumberField.Increment />
+            <NumberField.Input />
+            <button type="button" onClick={() => setDisabled(true)}>
+              Disable
+            </button>
+          </NumberField.Root>
+        );
+      }
+
+      await render(<App />);
+
+      const input = screen.getByRole('textbox');
+      const increment = screen.getByRole('button', { name: 'Increase' });
+
+      fireEvent.pointerDown(increment, {
+        button: 0,
+        pointerType: 'mouse',
+      });
+
+      expect(input).toHaveValue('1');
+
+      fireEvent.click(screen.getByRole('button', { name: 'Disable' }));
+
+      clock.tick(START_AUTO_CHANGE_DELAY);
+      clock.tick(CHANGE_VALUE_TICK_DELAY);
+      clock.tick(CHANGE_VALUE_TICK_DELAY);
+
+      expect(input).toHaveValue('1');
+    });
+
     it('removes the global release listener when unmounted during a hold', async () => {
       const addEventListener = vi.spyOn(window, 'addEventListener');
       const removeEventListener = vi.spyOn(window, 'removeEventListener');

packages/react/src/number-field/root/NumberFieldRoot.test.tsx

@@ -931,6 +931,26 @@ describe('<NumberField />', () => {
       const input = screen.getByRole('textbox');
       expect(input).toHaveAttribute('disabled');
     });
+
+    it('stops an active press-and-hold interaction when disabled', async () => {
+      const { setProps } = await render(<NumberField defaultValue={0} />);
+      const input = screen.getByRole('textbox');
+
+      fireEvent.pointerDown(screen.getByLabelText('Increase'), {
+        button: 0,
+        pointerType: 'mouse',
+      });
+      expect(input).toHaveValue('1');
+
+      await setProps({ disabled: true });
+      await act(async () => {
+        await new Promise<void>((resolve) => {
+          setTimeout(resolve, 500);
+        });
+      });
+
+      expect(input).toHaveValue('1');
+    });
   });
 
   describe('prop: readOnly', () => {