Material UI TextField multiline, make a new line only when pressed Shift Enter

Question

I have a chat system built in React and I am using Material UI textfield for submitting a message. I want it to function like whatsapp or telegram on the web version. On enter send the message but on shift enter, make a new line. I have this

             <TextField
                autoFocus={true}
                color={"primary"}
                multiline
                rowsMax={4}
                value={inputValue}
                fullWidth
                placeholder={"Please enter a message"}
                onChange={e => {
                  setInputValue(e.target.value);
                }}
              />

What should I add to acheive that functionality, is it easy?

Answer 1

Add onKeyDown prop to your TextField

onKeyDown={(e) => {
  if(e.keyCode === 13 && !e.shiftKey) {
    e.preventDefault();
    setInputValue("");
  }
}}