Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RichTextEditor crashes after hitting Enter #277

Closed
martyna-d opened this issue Apr 19, 2019 · 5 comments

Comments

Projects
None yet
4 participants
@martyna-d
Copy link

commented Apr 19, 2019

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

This comment has been minimized.

Copy link

commented Apr 19, 2019

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

This comment has been minimized.

Copy link

commented May 8, 2019

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

This comment has been minimized.

Copy link

commented May 8, 2019

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 estruyf added this to the 1.13.2 milestone May 17, 2019

@estruyf

This comment has been minimized.

Copy link
Collaborator

commented May 17, 2019

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 comment has been minimized.

Copy link
Collaborator

commented May 22, 2019

This has just been released in the version 1.13.2.

@estruyf estruyf closed this May 22, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.