Preventing auto formatting on NumberField to exclude comma separation?

[deltasierra96]

This may go against the purpose of the component, however is there anyway to prevent the NumberField from formatting numbers to include the comma separation?

My zod validation requires a number input to be 6 digits but I'm facing the issue below.

Current number input > 123456
Current number output > 12,345

I scanned the docs and it's not exactly clear anywhere on how to achieve this.

[SteffenFrankSDC]

I think you can use the formatOptions parameter, specifically formatOptions={{ useGrouping: false }}, to not display the number without thousands separators.

This will however only change the way the numbers are displayed on screen - it should not affect the zod validation.

[deltasierra96]

You're a gentleman, Steffen. I had briefly looked at the format options however seen no mentioning of removing/modifying the thousands separators. Your answer done the trick perfectly.

Thank you for your help.

[snowystinger]

This seems like Zod is validating the input's string instead of the actual number value the string represents. Maybe something else is needed in order to wire it up? Otherwise I forsee a lot of trouble validating future NumberFields when units are included, or a different locale, etc

[deltasierra96]

Indeed it was. The zod schema was setup to reflect a Prisma schema that accepts a string input, although I was parsing the string to an int/number for the NumberField component to accept.

In the end it must've just been a caching issue as zod was not happy with the input before using Steffen's formatOptions recommendation. I'm not so sure?

Just to keep it consistent I've now modified the Prisma schema to be an Int instead of a String and everything seems to be going good.

I'm not sure if you seen my recent post about the issue of creating a PIN input for a 2FA form without having to use multiple inputs, but this post relates to that. Now just to squash the issue of limiting user input to be a max of 6 digits long.

[snowystinger]

I see; I think there are better components than NumberField for 2FA, as Reid pointed out.
Instead, you can use a TextField with the pattern prop to limit users to numbers and a length https://react-spectrum.adobe.com/react-spectrum/TextField.html#props

2FA isn't really a number; the value has no numerical meaning, so no localization should happen on it. Think of things like phone numbers or an address.