OnChange fires infinitely when defaultText is set & a state variable is set

[SileemFarghaly]

Checklist

• This is not covered in the repository examples.
• I am using the package latest version.
• This is a bug report or an enhancement proposal.

Description

The onChange event fires constantly if defaultValue is set and a state variable is set in the onChange .
Here's an example:

import React from "react";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import MUIRichTextEditor from "mui-rte";
import Draft from "draft-js";
import { convertToHTML } from "draft-convert";

function Editor() {
  const myTheme = createTheme({});

  const contentHtml = Draft.convertFromHTML("<p><strong>test</strong></p>");
  const state = Draft.ContentState.createFromBlockArray(
    contentHtml.contentBlocks,
    contentHtml.entityMap
  );
  const content = JSON.stringify(Draft.convertToRaw(state));

  const [text, setText] = React.useState();

  return (
    <ThemeProvider theme={myTheme}>
      <MUIRichTextEditor
        defaultValue={content}
        controls={["bold", "italic", "underline"]}
        inlineToolbar={false}
        onChange={(e) => {
          console.log("onchange");
          setText(e);
        }}
      />
      {text && (
        <div
          dangerouslySetInnerHTML={{
            __html: convertToHTML(text.getCurrentContent())
          }}
        />
      )}
    </ThemeProvider>
  );
}
export default Editor;

and a sandbox
https://codesandbox.io/s/mui-rte-basic-forked-tldkx

if defaultValue or setText(e); gets commented out, The onChange doesn't constantly fire and text gets updated as expected

[marcbernalencora]

Hi ! Has anyone find a workaround for this ? Thanks !

[jpcastro4]

Define one independent useState for MUIRichTextEditor but not modify this state with onChange. He not remain be changed while typing.

[zc-razanaqvi]

Any update?