react-number-format not allowing leading 0

1.6k Views Asked by At

I am using react-number-format. My users need to be able to enter values such as 0.01. They cannot do that. They have to start by entering 1, and then move their cursor to the beginning and then they can enter 0. They cannot start with 0. allowLeadingZeros={true} does not work.

This my onValueChange and NumberFormat field:

const onFTEChange = (values, sourceInfo) => {
    const id = sourceInfo?.event?.target?.id;
    var value = values?.floatValue || 0;
    if (["Labor"].includes(singleSizing?.ExpenseType)) {
        if (id === "1FTE") {
            setSingleSizing({ ...singleSizing, 1FTE: value, Q1Cost: value * blendedRate });
        } else if (id === "2FTE") {
            setSingleSizing({ ...singleSizing, 2FTE: value, Q2Cost: value * blendedRate });
        } else if (id === "3FTE") {
            setSingleSizing({ ...singleSizing, 3FTE: value, Q3Cost: value * blendedRate });
        } else if (id === "4FTE") {
            setSingleSizing({ ...singleSizing, 4FTE: value, Q4Cost: value * blendedRate });
        }
    }
};
...
<NumberFormat
    id="1FTE"
    label={"1 FTE"}
    customInput={TextField}
    isNumericString={true}
    thousandSeparator={true}
    decimalScale={2}
    allowLeadingZeros={true}
    onValueChange={onFTEChange}
    value={singleSizing?.1FTE || ""}
    {...props}
/>
0

There are 0 best solutions below