NumberField loops if decrement/increment buttons are manually disabled in controlled component

[will-stone]

Provide a general summary of the issue here

When clicking on a decrement or increment button that has an explicit isDisabled condition, based on the controlled state value, and you reach that condition, the value change enters a loop and keeps decreasing or increasing respectively.

🤔 Expected Behavior?

The value should decrease/increase to the disable conditions, disable the buttons, and the value remains stable.

😯 Current Behavior

CleanShot.2026-02-18.at.1.41.42.mp4

💁 Possible Solution

No response

🔦 Context

Why am I not using minValue/maxValue? Because I can't use the auto-snap-to-value-on-blur behaviour included with those props. This is because, on e-commerce sites, it's dangerous to automatically change user-input values in case the customer doesn't see the change and accidentally orders too little/much.

To keep using the NumberField component and all the other features it brings, we're not using the minValue, step, and maxValue props, but rather doing our own validation using controlled state.

🖥️ Steps to Reproduce

https://stackblitz.com/edit/a2fkg61d?file=src%2FNumberField.tsx

Version

1.15.1

What browsers are you seeing the problem on?

Firefox

If other, please specify.

Chrome

What operating system are you using?

macOS

🧢 Your Company/Team

RS

🕷 Tracking Issue

No response

[will-stone]

Please note, this wasn't the same bug I was witnessing locally, but I think that is because we're using the React compiler. What happened for me was that the onPress callback wasn't firing on that last click before reaching the disabled state. In trying to replicate it in Stackblitz I found it actually reacted in the way stated above. I'm guessing the fix for one will fix the other but if, once released, it does not resolve the issue I'm seeing then I'll open a different issue.

Thanks!

[LFDanLu]

We can certainly add some additional logic I think where we propagate button refs created in useNumberField to useSpinButton and thus to the increment/decrement button via the increment/decrementButtonProps in useSpinButton to check if they are disabled, making

react-spectrum/packages/@react-aria/spinbutton/src/useSpinButton.ts

Lines 154 to 180 in f3e3157

	const stepUpEvent = useEffectEvent(() => {
	if (maxValue === undefined || isNaN(maxValue) || value === undefined || isNaN(value) || value < maxValue) {
	onIncrementEvent();
	onIncrementPressStartEvent(60);
	}
	});
	const onIncrementPressStartEvent = useEffectEvent((initialStepDelay: number) => {
	clearAsyncEvent();
	isSpinning.current = true;
	// Start spinning after initial delay
	_async.current = window.setTimeout(stepUpEvent, initialStepDelay);
	});
	const stepDownEvent = useEffectEvent(() => {
	if (minValue === undefined || isNaN(minValue) || value === undefined || isNaN(value) || value > minValue) {
	onDecrementEvent();
	onDecrementPressStartEvent(60);
	}
	});
	const onDecrementPressStartEvent = useEffectEvent((initialStepDelay: number) => {
	clearAsyncEvent();
	isSpinning.current = true;
	// Start spinning after initial delay
	_async.current = window.setTimeout(stepDownEvent, initialStepDelay);
	});

more robust, more specifically adding isIncrementButtonDisabled/isDecrementButtonDisabled checks to stepUpEvent/stepDownEvent.

To clarify about your use case however, you mentioned

Why am I not using minValue/maxValue? Because I can't use the auto-snap-to-value-on-blur behaviour included with those props. This is because, on e-commerce sites, it's dangerous to automatically change user-input values in case the customer doesn't see the change and accidentally orders too little/much.

I suppose you want to keep the value as is (aka the user typed say 1000), but then invalidate the field while still disabling the increment button?

[will-stone]

Thanks @LFDanLu yep, I've started a PR here: #9679