How to stop React Number formatter from removing the extra 0 after the decimal point

Question

I am using a Number formatter on my text field in Mui, but when I type a number with 18.10 it removes the Zero and turns it into 18.1. How do I stop this from happening and retain the 0 at the end?

below is the code:

interface FormatterProps {
  onChange: (event: { target: { name: string; value: string } }) => void;
  name: string;
}

const CurrencyFormatter = React.forwardRef<NumberFormat<string>, FormatterProps>(
  function NumberFormatCustom(props, ref) {
    const { onChange, ...other } = props;
    return (
      <NumberFormat
        {...other}
        getInputRef={ref}
        onValueChange={(values) => {
          onChange({
            target: {
              name: props.name,
              value: values.value,
            },
          });
        }}
        fixedDecimalScale
        thousandSeparator
        isNumericString
        defaultValue={0}
      />
    );
  },
);

const AmountField = (props: TextFieldProps) => {

  return (
    <TextField
      {...props}
      data-testid="amount-field"
      placeholder='0'
      InputProps={{
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        inputComponent: CurrencyFormatter as any,
        startAdornment: <InputAdornment position="start">$</InputAdornment>,
      }}
      value={props.value ? props.value : ''}
    />
  );
}

export default AmountField;

Answer 1

Have been trying to find a solution for the same. For some reason I just found out that allowLeadingZeros prop makes it work, it should actually not allow that although.

Try out:

<NumberFormat allowLeadingZeros={true} />

Also don't forget to allow two decimal points in the scale so that two integers are allowed post the decimal:

<NumberFormat allowLeadingZeros={true} decimalScale={2} />