Enhancement on Textarea.js to allow custom ROWS_HEIGHT value

[kmestre]

Hello,

Currently in Textarea component the ROWS_HEIGHT is static, and it has 19 as value.
Can we make it updatable based on a new prop? This will be very useful when having smaller fonts and smaller line heights.

Please see below an example where I've a lot of "empty" space between the last text line and the underline:

I'll wait for your feedback.

Thanks!

[oliviertassinari]

This value is only used for the initial rendering, we compute the line height for the following updates.
https://github.com/mui-org/material-ui/blob/9ec2fcf5d8349e8f074fe5e07fc4018f66b90845/packages/material-ui/src/Input/Textarea.js#L8
Do you have a reproduction? I guess we could add a property to change the value.

[kmestre]

Ok thanks for your reply. But one thing that I've noticed was that the font-size that I used in my component was 14px but if I use the same used in default component, which is 16px, I do not get that "empty" space. Is there anything that can be done to adjust the height according to the font-size?
Thanks!

[oliviertassinari]

@kmestre Let me see a live example. Hard to tell without.

[kmestre]

@oliviertassinari here is the example https://codesandbox.io/s/z2rv8w948p
Thanks!

[CorayThan]

I was having some issues with this, and solved it by setting line height in the root element and font size in the input element, like this:

const styles = createStyles({
    root: {
        lineHeight: "64px"
    },
    input: {
        fontSize: 50,
    }
})

const TextFieldBig = withStyles(styles)((props: TextFieldProps) => {
    const {classes, ...rest} = props
    return (
        <TextField
            InputProps={{
                classes: classes
            }}
            {...rest}
        />
    )
})

[oliviertassinari]

@CorayThan What's wrong with that?

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const styles = theme => ({
  input: {
    fontSize: 40
  }
});

class TextFields extends React.Component {
  state = {
    multiline: "Controlled"
  };

  handleChange = name => event => {
    this.setState({
      [name]: event.target.value
    });
  };

  render() {
    const { classes } = this.props;

    return (
      <form className={classes.container} noValidate autoComplete="off">
        <TextField
          id="multiline-flexible"
          multiline
          rowsMax="4"
          value={this.state.multiline}
          onChange={this.handleChange("multiline")}
          InputProps={{
            className: classes.input
          }}
          margin="normal"
        />
      </form>
    );
  }
}

TextFields.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(TextFields);

https://codesandbox.io/s/w7kjjov6kw