Клавиша Backspace не работает для материала TextField с NumberFormat - PullRequest
Новая
       9

Клавиша Backspace не работает для материала TextField с NumberFormat

1 голос
/ 22 апреля 2020

Я пытаюсь использовать формат числа-ответа (NumberFormat) для форматирования значения цифры c в текстовом поле материала. В этом примере я могу ввести новые числовые символы, но я не могу удалить любые числовые символы с помощью клавиши возврата. Я также не могу использовать стрелки или клавиши удаления. Единственный способ удалить любой числовой символ - это выделить эти символы с помощью мыши и нажать клавишу пробела.

Хотя это не моё, следующая песочница кода копирует то, что я получаю: 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,
    }}

1 Ответ

1 голос
/ 23 апреля 2020

На самом деле есть консольное предупреждение, сообщающее о проблеме:

Предупреждение: сбойный тип пропелива: недопустимая опора type значения number, предоставленная NumberFormat, ожидаемая одна из [" текст», "тела", "пароль"]. в NumberFormat (в demo.tsx: 14)

Если вы удалите недействительный type="number" из TextField, то, похоже, он будет работать нормально.

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

...