Rich text crashes when clicked multiple times in a row

Category

[ ] Enhancement [x] Bug [ ] Question

Version

Please specify what version of the library you are using: [3.5.0]

Expected / Desired Behavior / Question

Nothing happens.

Observed Behavior

The application crashes (react crashes), with message:

Uncaught Invariant Violation: 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.

Crashes here, at the row 867, this.setState: https://github.com/pnp/sp-dev-fx-controls-react/blob/2f2839739fbd6337fa171cab88afc67e1b434f53/src/controls/richText/RichText.tsx#L854-L873

Steps to Reproduce

Quickly (milliseconds) click in the RichText text control several times, like five or so (using left mouse button). The rich text should not be empty (should contain some formatted text, such as a hyperlink)

It looks like the handler just enters the infinite loop, maybe a safeguard around it could solve it.

[nbelyh]

@joelfmrodrigues unfortunately I am not sure how to fix this properly… 😢 The issue looks a bit complicated for me. There were already several attempts to fix the core thing as far as I understand (linked issue), i.e. the <ReactQuill value={....}> thing. There are even comments in the code related to it 😄 For myself, I just went for the workaround of replacing the value={} with defaultValue={} thing and updating the text manually in my code in onChange event. But this won’t work in general case, described in the linked issue. I mean here: https://github.com/pnp/sp-dev-fx-controls-react/blob/2f2839739fbd6337fa171cab88afc67e1b434f53/src/controls/richText/RichText.tsx#L630

This comment is a sad truth. Unfortunately, if you replace value with defaultValue, you’ll get the “evil” issue 666 come back again. I’ve decided just to live with that one for now… waiting for a hero 😄 I would say the author of that comment may be a decent candidate 😄

I could revert the fix for 666, I think having 666 is better than infinite loop and app crash anyway? I would probably ask @AJIXuMuK to look at this when he has time, since he already dealt with this thing?

[AJIXuMuK]

I will look at it for sure. Little business: find appropriate block of time 😃