Infinite recursion on Multiline Text Field - "Maximum update depth exceeded."

[xlthor]

On FF 59.0/64bit/Win 10 with a multiline input, hitting the first input char, the error occurs:
There's an update / rendering recursion which gets caught with "Maximum update depth exceeded."

Chrome, IE, Edge are fine so far, only FF 59.0 is affected!

Expected Behavior

Multiline fields work smoothly in any current browser

Current Behavior

the issue can be reproduced by this link https://codesandbox.io/s/3222mr5ywp
in FF 59.0 (!) on Win 10:
as soon as the first char is type in the field, the update recursion starts and ends with "Maximum update depth exceeded"

Steps to Reproduce (for bugs)

https://codesandbox.io/s/3222mr5ywp

The problem seem to be related to maxRows and rows properties. Ass soon as the only maxRows is defined and rows is missing or less than maxRows, the issue occurs.

Context

Multiline Textfield is unusable in current FF Version 59.0

Your Environment

Tech	Version
Material-UI	[email protected]
React	16.0.0
browser	FF 59.0 64bit
OS	Win 10 64bit
webpack	4.6.0

[oliviertassinari]

Is this a duplicate of #8741?

[xlthor]

#8741 has been closed and is missing some more detailed descriptions of a possible root cause.

[jollyBaker]

I had the same bug with the multiLine TextField in a Dialog, I "solved" this by using a fixed number of rows. But would appreciate a proper solution as well :)

[xlthor]

@jollyBaker yepp, same "solution" here:

if ( this.browser && this.browser.name == 'firefox' ) {
          rowsProps = {
                  rowsMax: 4,
                  rows: 4,
          }
      }

[oliviertassinari]

The infinit loop is coming from:

console.log('syncHeightWithShadow', this.state.height, newHeight)