react-number-format: decimalScale not functioning as expected

340 Views Asked by At

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?

0

There are 0 best solutions below