Feature request: Set a max height for multiline text fields?

[georgeutsin]

Issue summary

Is it possible to set a max height for multiline text fields in the React component (where overflow would just introduce scrolling)? I know there's a way to set a minimum number of lines, but I was just wondering if theres a way to handle text fields with a lot of text. I tried setting css max height in various different ways, but they seem to be overrided by the height attribute in TextField.tsx.

[AndrewMusgrave]

Hi @georgeustin currently text field does not support a max height prop. A possible solution to handle large fields of text would be to wrap text field with a scrollable

class Example extends React.Component {
  state = {
    value: '',
  };

  handleChange = (value) => {
    this.setState({value});
  };

  render() {
    const {value} = this.state;

    return (
      <Scrollable style={{height: '500px'}}>
        <TextField
          label="Text field"
          multiline={5}
          value={value}
          onChange={this.handleChange}
        />
      </Scrollable>
    );
  }
}

Let me know if this was what you were looking for!

[georgeutsin]

The scrollable that @AndrewMusgrave suggested works in some cases that I tested, but it didn't work for my use case since there was some wonky interaction with other elements causing the scroll height to become twice that of the text area.

For any weary travelers seeking help in future, I worked around this problem by just using a textarea and stealing some CSS from polaris:
Ex:

<div className="Polaris-TextField">
    <textarea
        style={{ resize: 'none', height: '120px', width: '100%' }}
        id="TEXT-AREA-ID"
        value={this.yourvalue}
        onChange={this.yourfunction()}
        className="Polaris-TextField__Input" aria-invalid="false" />
    <div className="Polaris-TextField__Backdrop"></div>
</div>

Note that this changes your onChange() handler to accept an event instead of a value (you can access the value with event.target.value), but that's a minor L

[ltakens]

For anyone finding this issue, maxHeight is implemented in later versions of Polaris.
#4476