NumberField decrement converts negative to positive

[patrik-csak]

Provide a general summary of the issue here

When setting signDisplay to "never", <NumberField>'s decrement button converts negative values to positive, resulting in an incorrect post-decrement value

🤔 Expected Behavior?

Negative values should remain negative

😯 Current Behavior

Negative values are converted to positive

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

https://stackblitz.com/edit/vitejs-vite-xxqht6jk?file=src%2FApp.jsx

import { useState } from 'react';
import {
  NumberField,
  Label,
  Group,
  Input,
  Button,
} from 'react-aria-components';

function App() {
  const [showSign, setShowSign] = useState(true);
  const [value, setValue] = useState(0);

  return (
    <>
      <div>
        <input
          id="show-sign"
          type="checkbox"
          checked={showSign}
          onChange={(event) => setShowSign(event.target.checked)}
        />
        <label htmlFor="show-sign">Show sign</label>
      </div>
      <hr />
      <NumberField
        formatOptions={{ signDisplay: showSign ? 'auto' : 'never' }}
        onChange={setValue}
        value={value}
      >
        <Label>Value: {value}</Label>
        <Group>
          <Button slot="decrement">-</Button>
          <Input />
          <Button slot="increment">+</Button>
        </Group>
      </NumberField>
    </>
  );
}

export default App;

To reproduce:

1. Set value to 0
2. Check 'Show sign'
3. Decrement value twice
   • Notice that value decrements in the negative direction correctly: 0 → -1 → -2
4. Set value to 0
5. Uncheck 'Show sign'
6. Decrement value twice
   • Notice that value is not correctly decremented: 0 → -1 → 0

Version

react-aria-components@1.12.1

What browsers are you seeing the problem on?

Safari

If other, please specify.

No response

What operating system are you using?

macOS Tahoe 26.1

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[reidbarber]

It seems like within useNumberFieldState we pass through the signDisplay so it gets used internally for parsing/formatting. Maybe we should strip it out there, but keep it for the displayed value? Also somewhat related, we can probably remove the signDisplay pollyfill now, although it doesn't affect this issue.

[snowystinger]

Without the sign, how do you know if it's a positive or negative number as a user? It'd seem arbitrary as both incrementing and decrementing from 0 would lead to 1

Can you explain your use case more? I might just be missing the use case here.

[patrik-csak]

My use case is that the value indicates an object's position in space relative to a human body, where the user is familiar with anatomical location terms.

For example, to the user, incrementing from zero would be '1 mm lateral', while decrementing would be '1 mm medial'. Under the hood, those values are represented as +1 or -1.

Here's another demo: https://stackblitz.com/edit/vitejs-vite-7i9obgj9?file=src%2FApp.jsx

[snowystinger]

Thanks, that helps a lot. How would a user typing into the field expect to change the sign? unfortunately lateral and medial aren't part of the units/signs in the Intl library.

If the answer is that they type a minus (anywhere?) and it flips the sign, then what indication do they have that the value changed? must they go look at the formatted output elsewhere? If there are many of these fields in a row, it seems hard to scan for which values are positive or negative. Harder still for someone using an assistive technology who may have to physically navigate away to verify the change.

Could you have a toggle outside the field which goes between medial and lateral, then the number field could be restricted to positive numbers only?

[patrik-csak]

Here's what I'm working on:

CleanShot.2025-10-20.at.16.45.33.mp4

[snowystinger]

Ok, yeah, I see.

We derive the current value from the inputValue on each render currently

react-spectrum/packages/@react-stately/numberfield/src/useNumberFieldState.ts

Line 148 in f40b575

let parsedValue = useMemo(() => numberParser.parse(inputValue), [numberParser, inputValue]);

This is so that typing into the input, then pressing the inc/dec or ArrowUp/ArrowDown buttons will take effect on that value, not the previous state value which hasn't actually been committed and updated yet (no blur or enter to commit).

We could possibly add some logic around this line:

let parsedValue = useMemo(() => numberParser.parse(inputValue), [numberParser, inputValue]);
if (numberValue < 0 && parsedValue > 0) {
  // maybe match signs? but the numberValue may be behind what the user is trying to type
  // only do when number formatting options are always hide sign?
}

And a little farther down

react-spectrum/packages/@react-stately/numberfield/src/useNumberFieldState.ts

Line 171 in f40b575

clampedValue = numberParser.parse(format(clampedValue));

let prevClampedValue = clampedValue;
clampedValue = numberParser.parse(format(clampedValue));
if (prevClampedValue < 0 && clampedValue > 0) {
  clampedValue = -clampedValue;
} else if (prevClampedValue > 0 && clampedValue < 0) {
  clampedValue = -clampedValue;
}

Will keep having a think about it. But you could try this in a patch-package situation to see if it works for you

[patrik-csak]

Thanks, @snowystinger. I appreciate your time on this one.

[snowystinger]

Hey, we chatted some more about this. What would happen if instead of all of this extra parsing work, you just swapped the two buttons?

Then since you have the NumberField in a controlled state, you should have enough information from the previous value and the incoming next value to determine if you're supposed to move left or right.

https://stackblitz.com/edit/vitejs-vite-itcm8r2c?file=src%2FApp.jsx