Passing `null` to `NumericFormat.value` does not clear the input, but `""` does

[kyleratti]

Describe the issue and the actual behavior

If you pass React state into the value property of NumericFormat, and that state is null instead of an empty string, the input continues to render with the last visible numeric input instead of clearing itself.

If you change it to an empty string instead of null, however, it works fine.

Describe the expected behavior

I would expect null and "" to both clear the rendered value on the input.

Provide a CodeSandbox link illustrating the issue

I have a repro set up with a minimal example.

Live view: https://kyleratti.github.io/react-number-format-bug/

Code: https://github.com/kyleratti/react-number-format-bug/blob/main/src/App.tsx

Provide steps to reproduce this issue

Exact steps and and visualization of the issue are outlined on the repro link above. Essentially:

1. Have a React.useState hook with a default value of null.
2. Provide that useState value to the value property of the NumericFormat.
3. Add a button that sets the state back to null.
4. Type a few numbers into the input.
5. Click the button that sets the state back to null.
6. Note that the NumericFormat element continues showing whatever your input from step 4 was.

If you have the button set the state to "" (empty string), the input clears as expected.

Please check the browsers where the issue is seen

• [x] Chrome
• [ ] Chrome (Android)
• [ ] Safari (OSX)
• [ ] Safari (iOS)
• [x] Firefox
• [ ] Firefox (Android)

[MeanMangosteen]

Also experience this. Got around it for the time being by creating a wrapper component <Input /> that wraps NumericFormat which passes the prop value={value ?? ""} to NumericFormat

[lifercode]

Thanks, @MeanMangosteen it's worked for me.

[jakub-bao]

+1

Also facing this issue.

[kyleratti]

@jakub-bao FYI - if you need a workaround, look at @MeanMangosteen's comment above:

https://github.com/s-yadav/react-number-format/issues/727#issuecomment-1617157506

[FaisalBudiono]

Any update on this fix?

[berk-can]

Also experience this. Got around it for the time being by creating a wrapper component <Input /> that wraps NumericFormat which passes the prop value={value ?? ""} to NumericFormat

Can you please show code I didnt get what you mean

[kyleratti]

@berk-can they most likely mean something like this:

export const NumberFormatWrapper: React.FC<NumericFormatProps> = (props) =>
	<NumericFormat
		{...props}
		value={props.value ?? ""} />;

And then in places where you need the NumericFormat component, you'd instead import your NumberFormatWrapper and use that in its place.

[berk-can]

@berk-can they most likely mean something like this:

export const NumberFormatWrapper: React.FC<NumericFormatProps> = (props) =>
	<NumericFormat
		{...props}
		value={props.value ?? ""} />;

And then in places where you need the NumericFormat component, you'd instead import your NumberFormatWrapper and use that in its place.

This doesnt fix it because I've tried passing value="2" and when page is refresh it shown 2 but after I press numeric keys it changed which means I couldnt input to show just 2 whatever I press

[kyleratti]

@berk-can please show your code

[berk-can]

@berk-can please show your code

sure here it is

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

export const NumericFormatPrice = forwardRef<NumericFormatProps, CustomProps>(
  function NumericFormatCustom(props, ref) {
    const {onChange, ...other} = props;

    return (
      <NumericFormat
        {...other}
        getInputRef={ref}
        onValueChange={(values) => {
          onChange({
            target: {
              name: props.name,
              value: values.value,
            },
          });
        }}
        value={'2'}
        decimalScale={2}
        thousandSeparator
        valueIsNumericString
        suffix=" TL"
      />
    );
  },
);

and I use this in my page with this

<TextField
          value={job?.price??0}
          InputProps={{
            inputComponent: NumericFormatPrice as any,
          }}
          variant="outlined"
        />