Add rowsMin

mui · Dec 13, 2019 · cbebea6 · cbebea6
1 parent 3bbc68d
commit cbebea6
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 7 deletions.
diff --git 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 = {
@@ -600,6 +601,17 @@ InputBase.propTypes = {
    */
   rowsMax: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /**
+<<<<<<< HEAD
+=======
+   * Minimum number of rows to display when multiline option is set to true.
+   */
+  rowsMin: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * Should be `true` when the component hosts a select.
+   */
+  select: PropTypes.bool,
+  /**
+>>>>>>> Add rowsMin
    * Start `InputAdornment` for this component.
    */
   startAdornment: PropTypes.node,

diff --git 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]);
+  }, [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
+   *
+   * @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
    */