Multiline TextField Deprecated But Replacement Not Working

[MrDogeBro]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

So I am using a text field on my site that I am building and I want it to be more than one line by default. I added the multiline prop and entered a number of rows via the rows prop, just like the documentation does. This functions and gives the desired visual output, however I get an error in my terminal and console that say that the rows prop is deprecated and I should use rowsMin instead. However, when I switch the rows prop to rowsMin, it doesn't change the number of lines that the text field is. This is super annoying, especially with the the message always being in console.

Traceback (from terminal):

Warning: Failed prop type: The prop `rows` of `ForwardRef(TextareaAutosize)` is deprecated. Use `rowsMin` instead.
    at TextareaAutosize (webpack-internal:///./node_modules/@material-ui/core/esm/TextareaAutosize/TextareaAutosize.js:41:24)
    at InputBase (webpack-internal:///./node_modules/@material-ui/core/esm/InputBase/InputBase.js:216:30)
    at WithStyles(ForwardRef(InputBase)) (/...project/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
    at Input (webpack-internal:///./node_modules/@material-ui/core/esm/Input/Input.js:132:32)
    at WithStyles(ForwardRef(Input)) (/...project/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
    at div
    at FormControl (webpack-internal:///./node_modules/@material-ui/core/esm/FormControl/FormControl.js:85:24)
    at WithStyles(ForwardRef(FormControl)) (/...project/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
    at TextField (webpack-internal:///./node_modules/@material-ui/core/esm/TextField/TextField.js:80:28)
    at WithStyles(ForwardRef(TextField)) (/...project/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
    at div
    at ThemeProvider (/...project/node_modules/@material-ui/styles/ThemeProvider/ThemeProvider.js:48:24)
    at form
    at div
    at div
    at Contact (webpack-internal:///./src/pages/contact.tsx:55:5)
    at div
    at MyApp (webpack-internal:///./src/pages/_app.tsx:21:3)
    at AppContainer (/...project/node_modules/next/dist/next-server/server/render.js:28:952)

Expected Behavior 🤔

The expected behavior is that the props that are listed on the docs should just work, and not throw any errors. This means that the rows prop would not throw an error or if it did, the prop provided in the error would actually work.

Steps to Reproduce 🕹

Live Example: https://codesandbox.io/s/materialuirowspropdeprecated-y6pub?file=/src/Demo.tsx (this is as close as I could make it using the template provided and without spending a ton of time on it)

Example:

import { Component } from 'react';
import TextField from '@material-ui/core/TextField';

interface Props {}
interface States {}

export default class Demo extends Component<Props, States> {
  constructor(props: Props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div>
        <TextField
          id="test"
          label="Testing"
          type="text"
          multiline
          rows={6}
          maxRows={6}
        />
      </div>
    );
  }
}

Steps:

1. Create a new Next JS project
2. Install Material UI
3. Create a component
4. Create a multiline TextField with a specified rows prop

Context 🔦

I'm just trying to make a simple form. It functions with the rows prop so at least it works but its extremely annoying that it is constantly throwing errors over it.

Your Environment 🌎

My browser is Firefox but that shouldn't have anything to do with this because the error is also seen in the terminal (like the server output when it starts up).

`npx @material-ui/envinfo`

  npx: installed 2 in 11.688s

  System:
    OS: OS X El Capitan 10.11.6
  Binaries:
    Node: 14.15.3 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.9 - /usr/local/bin/npm
  Browsers (seems your script is broken here because my actual list of browsers is below this codeblock):
    Chrome: Not Found
    Edge: Not Found
    Firefox: Not Found
    Safari: Not Found
  npmPackages:
    @emotion/styled:  10.0.27
    @material-ui/core: ^4.12.2 => 4.12.2
    @material-ui/styles:  4.11.4
    @material-ui/system:  4.12.1
    @material-ui/types:  5.1.0
    @material-ui/utils:  4.11.2
    @types/react: 17.0.9 => 17.0.9
    react: 17.0.2 => 17.0.2
    react-dom: 17.0.2 => 17.0.2
    typescript: 4.3.2 => 4.3.2

Actual List of Browsers:

• Firefox
• Tor
• Brave
• Safari
• Chrome

[michal-perlakowski]

Duplicate of #27291.

[MrDogeBro]

Sorry about that. I searched the issues but that one didn't come up because it's closed......so idk.....

[MrDogeBro]

Also, please update the docs to correspond with this change because when I checked before submitting this issue, the docs were incorrect and said to use the rows prop.

[MrDogeBro]

So using the minRows prop seems to be working. Just please update the docs because they currently contain invalid information which is mega confusing if your looking at the docs for help. Thanks.

[mnajdova]

Fixed by #27503

[MrDogeBro]

Thanks!