I have a field and there is a state:

const [inputValue, setInputValue] = useState('');

when I enter text in this field and click save, it is not saved, to save it is necessary to press the problem or enter button, but I need to make it so that I write something in the field, click the save button, without pressing the space or enter the value is added:

<TextField
    {...params}
    label="label"
    autoFocus
    onChange={(e) => setInputValue(e.target.value.trim())}
    onKeyDown={(e) => {
        const value = (e.target as HTMLInputElement).value.trim();
        if ((e.code === "Space" || e.code === "Enter") && value) {
            if (!passportIds.includes(value)) {
                field.onChange(field.value.concat(value));
            }
            setInputValue("");
        }
    }}
/>

I changed onChange to onInput but I got problem that every letter is saving like a chip

I have a field and there is a state:

const [inputValue, setInputValue] = useState('');

when I enter text in this field and click save, it is not saved, to save it is necessary to press the problem or enter button, but I need to make it so that I write something in the field, click the save button, without pressing the space or enter the value is added:

<TextField
    {...params}
    label="label"
    autoFocus
    onChange={(e) => setInputValue(e.target.value.trim())}
    onKeyDown={(e) => {
        const value = (e.target as HTMLInputElement).value.trim();
        if ((e.code === "Space" || e.code === "Enter") && value) {
            if (!passportIds.includes(value)) {
                field.onChange(field.value.concat(value));
            }
            setInputValue("");
        }
    }}
/>

I changed onChange to onInput but I got problem that every letter is saving like a chip

• reactjs
• material-ui

1 Answer 1

I would try tying it to onBlur which will trigger the input value to be saved to state when the input box loses focus.