Material-ui: [TextField] New line added when value prop is set (multiline is true) and enter is pressed

Created on 29 May 2017 · 4Comments · Source: mui-org/material-ui

Problem description

A new line is added when the value prop is set in TextField (with multiline true), and enter is pressed.

Link to minimal working code that reproduces the issue

https://www.webpackbin.com/bins/-KlGfX7Kl4Q4uqZ7MITB

Go to the textfield and press enter.

Versions

Material-UI: 0.18.1
React: 15.2
Browser: Chrome

bug 🐛 TextareaAutosize

Source

sajal50

Most helpful comment

@oliviertassinari I think I know what they mean
multiline

this is solved by adding event.preventDefault();

keyPress= (event)=>{
    if (event.keyCode === 13) {
      console.log(event.target.value);
      this.setState({
        multiline: '',
      });
+     event.preventDefault();
    }
  }

joshwooding on 2 Jan 2019

👍2

All 4 comments

This bug still exists in the latest version V3.8.1, when use onKeyDown
here is demo link
https://codesandbox.io/embed/nrryxqw5wm

symptom:
First enter adds a new line. The following enters work fine.

work round:
use onKeyUp instead of onKeyDown

lindenquan on 2 Jan 2019

@lindenquan Your bug report is incomplete (browser version, I can't reproduce). If you believe it's an issue, please open a new one following our template. Alternatively, could it be a duplicate of #12172?

oliviertassinari on 2 Jan 2019

@oliviertassinari I think I know what they mean
multiline

this is solved by adding event.preventDefault();

keyPress= (event)=>{
    if (event.keyCode === 13) {
      console.log(event.target.value);
      this.setState({
        multiline: '',
      });
+     event.preventDefault();
    }
  }

joshwooding on 2 Jan 2019

👍2

Thanks @joshwooding
You solved my problem, I couldn't figure it out yesterday

lindenquan on 2 Jan 2019

Was this page helpful?

0 / 5 - 0 ratings