RichTextEditor crashes after hitting Enter

[martyna-d]

Category

[ ] Enhancement

[x ] Bug

[ ] Question

Version

Please specify what version of the library you are using: [ 1.13.0-beta.d32fd65 ]

Expected / Desired Behavior / Question

After hitting Enter key new line is added.

Observed Behavior

After hitting enter key control crashes, in devTools console following error is thrown :
Uncaught Invariant Violation: Minified React error #185; visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Steps to Reproduce

1. type anything into editor
2. press Enter

When I hit enter in the middle of the word, it works ok, only crashes when at the end of the line. My current value of the field is:

<p>
   <br/>
</p>
<p>​​​<br/></p>

[Holden15]

I noticed this behavior as well when I was saving the newValue to my state. I changed it to a global variable and fixed the crashing.

[davehax]

I'm trying to capture the value of the RichText editor and save it into my Components state with the 'onChange' callback. This, apparently, isn't the right way to do things as the entire WebPart crashes and in the console the following message is received:

Invariant Violation: Minified React error #185; visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

The error #185 expands to "Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops."

[davehax]

I'm trying to capture the value of the RichText editor and save it into my Components state with the 'onChange' callback. This, apparently, isn't the right way to do things as the entire WebPart crashes and in the console the following message is received:

Invariant Violation: Minified React error #185; visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

The error #185 expands to "Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops."

An alternative approach that will do for the moment is to create a class variable and keep track of the value there. E.g.

...
private richTextValue: string;
...
private onRichTextChange(text: string): string {
  this.richTextValue = text;
  return text;
}
...
<RichText value={this.richText} onChange={(text) => this.onRichTextChange(text)} />
...

However shouldn't we be able to keep track of the value in our Component's State?

[estruyf]

Implemented a fix which should solve this. Would you be able to test out the latest beta and verify if this also fixes it for you?

Here you can read more information on how you can test out the latest beta version: https://sharepoint.github.io/sp-dev-fx-controls-react/beta/

[estruyf]

This has just been released in the version 1.13.2.