[TextareaAutosize] Add a rowsMin prop

[lcswillems]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Add a autosize property to TextField to be used with the multiline prop.

With autosize, I would expect rows define the minimum number of rows.

Motivation 🔦

The TextareaAutosize had been released recently but the UI is ugly. It would be nice if it could be used with the TextField component. If it is already possible, I couldn't find any documentation about it.

[lcswillems]

Okay, I see. It already uses it under the hood.

So, the only part relevant of my message is:

With autosize, I would expect rows define the minimum number of rows.

Or maybe only a minRows property would be sufficient.

[oliviertassinari]

@lcswillems Thanks for the report. Something is not right. This logic breaks the consistency between the TextareaAutosize component and the InputBase:
https://github.com/mui-org/material-ui/blob/575776f3004c6ac655b128fbdb30bd4b35115ab7/packages/material-ui/src/InputBase/InputBase.js#L376-L378

For consistency, if we add a new prop, it should be named rowsMin, so it matches rowsMax (and probably rename it maxRows/minRows in v5).

Here are two different alternatives API:

• https://github.com/buildo/react-autosize-textarea#props
• https://github.com/andreypopp/react-textarea-autosize#special-props.

I assume that in most cases, people will need to set a maximum number of rows (do you confirm?) However, we should aim for an intuitive API.

---

Ok, I think that I would support this change, I suspect it would be more intuitive to the many:

• InputBase: add rowsMin, if rows is used => <textarea>, if rowsMax or rowsMin is used => TextareaAutosize
• TextareaAutosize: add rowsMin, take precedence over rows. Hide / deprecate the rows prop for rowsMin instead.

Would you confirm?

[lcswillems]

rowsMin or minRows is the same for me, so rowsMin is better for consistency.

I don't know if what people uses most. Personally, I only needed rowsMin for the moment.

Yes, I confirm both points.

[oliviertassinari]

I think that the diff would look something like this:

diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js
index e425bd307..27446a3a9 100644
--- a/packages/material-ui/src/InputBase/InputBase.js
+++ b/packages/material-ui/src/InputBase/InputBase.js
@@ -191,6 +191,7 @@ const InputBase = React.forwardRef(function InputBase(props, ref) {
     renderSuffix,
     rows,
     rowsMax,
+    rowsMin,
     startAdornment,
     type = 'text',
     value: valueProp,
@@ -367,7 +368,7 @@ const InputBase = React.forwardRef(function InputBase(props, ref) {
       ref: null,
     };
   } else if (multiline) {
-    if (rows && !rowsMax) {
+    if (rows && !rowsMax && !rowsMin) {
       InputComponent = 'textarea';
     } else {
       inputProps = {
@@ -599,6 +600,10 @@ InputBase.propTypes = {
    * Maximum number of rows to display when multiline option is set to true.
    */
   rowsMax: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * Minimum number of rows to display when multiline option is set to true.
+   */
+  rowsMin: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /**
    * Start `InputAdornment` for this component.
    */
diff --git a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js
index d7040ddc1..65dd103b3 100644
--- a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js
+++ b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js
@@ -27,7 +27,9 @@ const styles = {
 };

 const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref) {
-  const { onChange, rows, rowsMax, style, value, ...other } = props;
+  const { onChange, rows, rowsMax, rowsMin: rowsMinProp = 1, style, value, ...other } = props;
+
+  const rowsMin = rowsMinProp || rows;

   const { current: isControlled } = React.useRef(value != null);
   const inputRef = React.useRef(null);
@@ -60,8 +62,8 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref)
     // The height of the outer content
     let outerHeight = innerHeight;

-    if (rows != null) {
-      outerHeight = Math.max(Number(rows) * singleRowHeight, outerHeight);
+    if (rowsMin != null) {
+      outerHeight = Math.max(Number(rowsMin) * singleRowHeight, outerHeight);
     }
     if (rowsMax != null) {
       outerHeight = Math.min(Number(rowsMax) * singleRowHeight, outerHeight);
@@ -88,7 +90,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref)

       return prevState;
     });
-  }, [rows, rowsMax, props.placeholder]);
+  }, [rowsMin, rowsMax, props.placeholder]);

   React.useEffect(() => {
     const handleResize = debounce(() => {
@@ -123,7 +125,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref)
         onChange={handleChange}
         ref={handleRef}
         // Apply the rows prop to get a "correct" first SSR paint
-        rows={rows || 1}
+        rows={rowsMin}
         style={{
           height: state.outerHeightStyle,
           // Need a large enough different to allow scrolling.
@@ -159,13 +161,19 @@ TextareaAutosize.propTypes = {
    */
   placeholder: PropTypes.string,
   /**
-   * Minimum number of rows to display.
+   * Use `rowsMin` instead
+   *
+   * @deprecated
    */
   rows: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /**
    * Maximum number of rows to display.
    */
   rowsMax: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * Minimum number of rows to display.
+   */
+  rowsMin: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /**
    * @ignore
    */

[lcswillems]

Yes, that looks good for me. I can do a PR for it if needed!

[oliviertassinari]

@lcswillems This would be awesome :)