Prevent user from entering decimal point in the NumberField

[jonathandsouza]

Hi There,

I have a use case where I need to only allow integers in NumberField (react-aria-components) i.e the user should not be allowed to enter decimal point in the component.

Any help/guidance would be much appreciated.

[snowystinger]

Unfortunately, there's not much we can do about this. Depending on the locale, a decimal point may either be a , or a ., or something else entirely. Any of those characters could also potentially be the group separator. We do not know what the user most likely intends until the number is complete.

[cheema-corellian]

Perhaps this behavior could be controlled with a setting for the NumberField Component?

[jonathandsouza]

Hi There,

Thanks for getting back to me.

I found a workaround to prevent user from entering decimal point. I achieved this by setting the maximumFractionDigits to 0 and useGrouping to false.

The downside is that the user will not be able to do grouping of digits, which is acceptable in my use case.

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