Maximum update depth exceeded on displaying the editor in a component

[ewuski]

What is the current behavior? I have a dropdown that selects a price item. Upon selecting the price item displays a map of several options. All of its options have a tinymce editor to fill in, eg:

Price items select

Price item 1

Price option

Editor1 Editor2

Price option

Editor1 Editor2

Price option

Editor1 Editor2

Price item 2

Price option

Editor1 Editor2

Price option

Editor1 Editor2

For certain price items upon selection (when the price item is being loaded and editors get displayed) the Editor throws an error in the console and breaks the entire script.

Uncaught Error: 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. at checkForNestedUpdates (react-dom.development.js:27245:1) at scheduleUpdateOnFiber (react-dom.development.js:25365:1) at dispatchSetState (react-dom.development.js:17389:1) at Object.handleRteChange [as onEditorChange] (PricesetForm.js:60:9) at Editor._this.handleEditorChange (Editor.js:95:1) at GR.dispatch (tinymce.min.js:9:368942) at yA.dispatch (tinymce.min.js:9:370196) at gm (tinymce.min.js:9:106976) at ry (tinymce.min.js:9:208193) at tinymce.min.js:9:230790

Please provide the steps to reproduce and if possible a minimal demo of the problem via codesandbox.io or similar.

The editor is used within a mapping function. It is a form that have several options and each incudes a tinymce for its own content.

import { Editor } from '@tinymce/tinymce-react';

<Editor id='id1'
    apiKey="..."
    value='some value'
    init={{
        height: 240,
        menubar: false,
        selector: "textarea.tinymce",
        plugins: [
            'pagebreak', 'lists', 'wordcount', //'fullscreen', 'searchreplace'
        ],
        toolbar: 'undo redo | bullist',
        content_css: "/dist/css/style.rte.min.css",
    }}
    onEditorChange={handleRteChange}
/>

What is the expected behavior?

The script shouldn't break and if there is an issue it should handle the error instead of breaking the entire page.

Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE or tinymce-react?

@tinymce/tinymce-react: "^4.2.0" react 18.1.0 Chrome, Firefox, possibly other browsers as well Windows 10

[exalate-issue-sync[bot]]

Ref: INT-3046

[yacodes]

@ewuski Can I ask you to provide a minimal example where this problem is reproduced? At codesandbox.io, for example.

[ewuski]

I'll try to get the code for you this week.

[tiny-james]

Do you have an example? At minimum I need to know what handleRteChange does as it seems that the update problem involves that function being called, it triggering an update which in turns calls that function again recursively. Also I note that you are setting value to a constant which I assume is just for demo purposes but unfortunately we need to know how that is being set to have any hope of understanding the cause of this problem.

[nickornotto]

Yes, sorry for the delay. I am very busy. I'll add it for sure.

[ewuski]

Hi, I am unable to reproduce this issue at the moment in the current context of our project. I will certainly post an example here if I'll stumble upon this issue again.

[tiny-james]

Ok, closing now as unreproducable.

If you manage to reproduce the error then reopen the issue or create a new one.