`NumberField` doesn't allow deleting the first digit if it's immediately followed by a group separator

[illright]

Provide a general summary of the issue here

If you have a locale that has thousand separators for numbers, then enter a number like 1337, it will be formatted as 1,337 on blur. Then if you try to hit Backspace on 1, nothing will happen because ,337 is not a valid number

🤔 Expected Behavior?

It should allow erasing the 1 and strip the thousand separator itself

😯 Current Behavior

It doesn't allow erasing the 1, you have to move the cursor and erase the comma first

💁 Possible Solution

Strip the grouping separators automatically or have a way to have them always removed during editing

🔦 Context

No response

🖥️ Steps to Reproduce

The first live example in https://react-spectrum.adobe.com/react-aria/NumberField.html

Make sure you have a locale with thousand separators and place your cursor like this: 1|,024, then hit Backspace and watch nothing happen

Version

1.1.0

What browsers are you seeing the problem on?

Other

If other, please specify.

Brave

What operating system are you using?

Mac

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

Verified that this happens in RSP NumberField as well, digging.

[LFDanLu]

So the reason for this is that we want to prevent a user from typing in a separator as a leading value. The code flow is as follows: onChange we validate the nextValue using a number parser and hit this early return. I think this makes sense for the case for the case where the user is trying to type in a new value with starting with a separator but maybe we could try to detect this specific case of deletion and automatically remove the group separator for the user, might be a bit tricky setting up the conditions for that. Alternatively, we could just sanitize the input value completely prior to that check in isValidPartialNumber which would allow the user to type in a leading , in the numberfield and then just have the value "fix" itself on blur. cc @snowystinger in case you remember anything specifically with this section of the logic and why we wanted to prevent the leading , from being typed if we adjust the value to be valid on blur.

[snowystinger]

From my recollection, it was hard to tell if someone was typing a decimal or group separator and trying to allow for both was confusing for a user because they might think they've typed one when in fact they've typed the other.

If we can find a good way to delete the group separator at the same time, that's probably best. It might cause a problem with the cursor location though.

[sparklerfish]

Are there any updates on the status of this issue or plans for a fix? Alternately, has anyone found a workaround? I hit this bug today and could not come up with a solution, resulting in being unable to use this library at all to fulfill the requirements for my project.

[ktml]

I bumped into the issue too. For now I disable grouping separator by having {useGrouping: false} in formatOptions. Not exactly a workaround but at least now it doesn't stop user from deleting numbers.