[TextareaAutosize] Add rowsMin prop (#18804)

Author: lcswillems

docs/pages/api/input-base.md

@@ -49,6 +49,7 @@ It contains a load of style reset and some state logic.
 | <span class="prop-name">required</span> | <span class="prop-type">bool</span> |  | If `true`, the `input` element will be required. |
 | <span class="prop-name">rows</span> | <span class="prop-type">string<br>&#124;&nbsp;number</span> |  | Number of rows to display when multiline option is set to true. |
 | <span class="prop-name">rowsMax</span> | <span class="prop-type">string<br>&#124;&nbsp;number</span> |  | Maximum number of rows to display when multiline option is set to true. |
+| <span class="prop-name">rowsMin</span> | <span class="prop-type">string<br>&#124;&nbsp;number</span> |  | Minimum number of rows to display when multiline option is set to true. |
 | <span class="prop-name">startAdornment</span> | <span class="prop-type">node</span> |  | Start `InputAdornment` for this component. |
 | <span class="prop-name">type</span> | <span class="prop-type">string</span> | <span class="prop-default">'text'</span> | Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). |
 | <span class="prop-name">value</span> | <span class="prop-type">any</span> |  | The value of the `input` element, required for a controlled component. |

docs/pages/api/textarea-autosize.md

@@ -24,8 +24,9 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span class="prop-name">rows</span> | <span class="prop-type">string<br>&#124;&nbsp;number</span> |  | Minimum number of rows to display. |
+| <span class="prop-name">rows</span> | <span class="prop-type">string<br>&#124;&nbsp;number</span> |  | Use `rowsMin` instead. The prop will be removed in v5. |
 | <span class="prop-name">rowsMax</span> | <span class="prop-type">string<br>&#124;&nbsp;number</span> |  | Maximum number of rows to display. |
+| <span class="prop-name">rowsMin</span> | <span class="prop-type">string<br>&#124;&nbsp;number</span> | <span class="prop-default">1</span> | Minimum number of rows to display. |
 
 The `ref` is forwarded to the root element.
 

docs/src/pages/components/textarea-autosize/MinHeightTextarea.js

@@ -2,5 +2,5 @@ import React from 'react';
 import TextareaAutosize from '@material-ui/core/TextareaAutosize';
 
 export default function MinHeightTextarea() {
-  return <TextareaAutosize aria-label="minimum height" rows={3} placeholder="Minimum 3 rows" />;
+  return <TextareaAutosize aria-label="minimum height" rowsMin={3} placeholder="Minimum 3 rows" />;
 }

docs/src/pages/components/textarea-autosize/MinHeightTextarea.tsx

@@ -2,5 +2,5 @@ import React from 'react';
 import TextareaAutosize from '@material-ui/core/TextareaAutosize';
 
 export default function MinHeightTextarea() {
-  return <TextareaAutosize aria-label="minimum height" rows={3} placeholder="Minimum 3 rows" />;
+  return <TextareaAutosize aria-label="minimum height" rowsMin={3} placeholder="Minimum 3 rows" />;
 }

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.
    */

packages/material-ui/src/TextareaAutosize/TextareaAutosize.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 export interface TextareaAutosizeProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   rowsMax?: string | number;
+  rowsMin?: string | number;
 }
 
 declare const TextareaAutosize: React.ComponentType<

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 = rows || rowsMinProp;
 
   const { current: isControlled } = React.useRef(value != null);
   const inputRef = React.useRef(null);
@@ -60,10 +62,10 @@ 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) {
+      outerHeight = Math.max(Number(rowsMin) * singleRowHeight, outerHeight);
     }
-    if (rowsMax != null) {
+    if (rowsMax) {
       outerHeight = Math.min(Number(rowsMax) * singleRowHeight, outerHeight);
     }
     outerHeight = Math.max(outerHeight, singleRowHeight);
@@ -88,7 +90,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref)
 
       return prevState;
     });
-  }, [rows, rowsMax, props.placeholder]);
+  }, [rowsMax, rowsMin, 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. The prop will be removed in v5.
+   *
+   * @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
    */