Backspace key does not work for material ui TextField with NumberFormat

Question

I am trying to use react-number-format (NumberFormat) to format a numeric value within the material ui TextField. In this is example I can type new number characters, but I cannot remove any number characters using the backspace key. I also cannot use the arrow or the delete keys. The only way I can remove any number character is to select those characters with the mouse and press the space bar.

While not mine, the following code sandbox replicates what I am getting: https://codesandbox.io/s/material-demo-iny12?file=/demo.tsx

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

    return (
        <NumberFormat
            {...other}
            customInput={TextField}
            getInputRef={inputRef}
            onValueChange={values => {

                onChange({
                    target: {
                        value: values.value,
                    },
                });
            }}
        />
    );
}

<TextField
    margin="dense"
    fullWidth={true}
    value={value}
    onChange={handleNumberChanged}
    variant="outlined"
    autoComplete="off"
    type="number"
    InputProps={{
        inputComponent: NumberFormatCustom,
    }}

Ryan Cogswell Ryan Cogswell · Accepted Answer · 2020-04-22T22:21:36

There is actually a console warning telling you the problem:

Warning: Failed prop type: Invalid prop type of value number supplied to NumberFormat, expected one of ["text","tel","password"]. in NumberFormat (at demo.tsx:14)

If you remove the invalid type="number" from the TextField then it seems to work fine.

https://codesandbox.io/s/material-demo-ovx7i

Backspace key does not work for material ui TextField with NumberFormat

1 Answers