TextField cursor moves to end if multiline

[morenoh149]

Problem description

After you give a multiline TextField focus. The first call to onChange causes the change to be made and the cursor skips to the end of the input.

Steps to reproduce

import React from 'react';
import TextField from 'material-ui/TextField';

export default class TextFieldExampleControlled extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      value: 'Property Value',
    };
  }

  handleChange = (event) => {
    this.setState({
      value: event.target.value,
    });
  };

  render() {
    return (
      <div>
        <TextField
          id="text-field-controlled"
          value={this.state.value}
          onChange={this.handleChange}
          fullWidth
          multiLine
          rows={10}
        />
      </div>
    );
  }
}

Versions

• Material-UI: 0.15.0
• React: 15.1.0
• Browser: chrome 51

The closest thing I could find in the code is a call to handleInputFocus which may be assuming the cursor should be at the end of the input, or by giving the field focus the browser automatically places the cursor at the end? not sure.

[jasan-s]

Try
<TextField autoFocus = {true} />

[morenoh149]

@jasan-s nope doesn't change the behavior. To be more specific the TextField resides within a Dialog. And the first time it's interacted with is after the area has been populated with text. The user then focuses into the TextField to change the default message and then the cursor jumps to the end of the message after the first keypress. Afterwards, and after multiple relaunches, editing the TextField works normally.

[mpontikes]

#4430 seems very related