OnValueChange convert input to wrong number

[a414137191]

const useStyles = makeStyles((theme) => ({
  root: {
    '& > *': {
      margin: theme.spacing(1),
    },
  },
}));

function NumberFormatCustom(props) {
  const { inputRef, onChange, ...other } = props;

  return (
    <NumberFormat
      {...other}
      getInputRef={inputRef}
      onValueChange={(values) => {
        onChange({
          target: {
            name: props.name,
            value: values.value,
          },
        });
      }}
      allowNegative={false}
      decimalScale={8}
      isNumericString
    />
  );
}

NumberFormatCustom.propTypes = {
  inputRef: PropTypes.func.isRequired,
  name: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
};

export default function FormattedInputs() {
  const classes = useStyles();
  const [amount1, setAmount1] = React.useState("0");
  const [amount2, setAmount2] = React.useState("0");

  const handleChange = (event) => {
    if(event.target.name === "amount1") {
      setAmount1(event.target.value)
      console.log("change1"+event.target.value)
    }else if(event.target.name === "amount2"){
      setAmount2(event.target.value)
      console.log("change2"+event.target.value)
  }
  };

  return (
    <div className={classes.root}>
      <TextField
        value={amount1}
        label="amount1"
        name="amount1"
        onChange={handleChange}
        InputProps={{
            inputComponent: NumberFormatCustom,
        }}
    />
      <TextField
        label="amount1"
        value={amount2}
        onChange={handleChange}
        name="amount2"
        InputProps={{
          inputComponent: NumberFormatCustom,
        }}
      />
    </div>
  );
}

when i use NumberFormat with decimalScale={8} and enter 997.00000002, it will convert to 1088.

[alvarotrigo]

I don't think @s-yadav maintains this project anymore?

[s-yadav]

I do maintain it @alvarotrigo. Just not getting an active time for it.
@a414137191 can you create a sandbox with breaking case.

[s-yadav]

@nikhil-varma. looks related to #506, but float values are not used here. @alvarotrigo a codesandbox will help us to debug better.

[a414137191]

@nikhil-varma. looks related to #506, but float values are not used here. @alvarotrigo a codesandbox will help us to debug better.

https://codesandbox.io/s/number-format-hiitb?file=/package.json

[s-yadav]

Thanks, @a414137191. Will check.

[s-yadav]

I am able to reproduce and found the root cause. So the real culprit is calling .toString() on the number which does not handle the scientific notation properly.

Looking into the best option to convert scientific notation to normal decimals. Will fix the issue soon.
As the method available on JS for this purpose doesn't properly work for this use case, using a custom function might be a solution.

Something like https://codereview.stackexchange.com/questions/243164/convert-exponential-e-notation-numbers-to-decimals

[s-yadav]

@a414137191 This is fixed in 4.5.4. Let me know if still face this issue.