I'm facing an issue with the react-number-format package in React. The decimalScale property is not working correctly in my weight field (weight).
I've tried setting decimalScale to display only one decimal place, but it doesn't seem to have any effect. The field still allows more than one decimal place.
Here's the relevant code:
export function InitialFormStep2({ handleNextStep }) {
// Hooks and logic omitted for brevity
return (
<VStack width="100%" spacing={8}>
{/* Remaining code omitted for brevity */}
<Controller
control={control}
name="weight"
render={({ field: { onChange, name, value } }) => (
<NumberFormat
customInput={Input}
thousandSeparator="."
decimalSeparator=","
decimalScale={1}
value={value}
onValueChange={(values) => {
onChange(values.value);
}}
isInvalid={!!errors.weight}
error={errors.weight?.message}
isNumericString
/>
)}
/>
I expected the weight field to display only one decimal place, and any input with more than one decimal place to be automatically adjusted. However, the field still allows more than one decimal place.
Can someone help me understand what's wrong with my implementation and how I can fix the decimalScale to work correctly?