React-draft-wysiwyg: getting a setState error when using MaterialUI tabs

[bmueller-sykes]

This looks like an error that was introduced with version 1.14.3. If the WYSIWYG Editor is in a MaterialUI tab, when you switch away from the editor, you get this:

Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the r component.

Here's an isolated case that produces the issue (at least in my environment):

import React, { Fragment, useState } from 'react';

import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';

import { EditorState, ContentState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import htmlToDraft from 'html-to-draftjs';

const toDraft = (value: any) => {
  const draftValue = htmlToDraft(value || '');
  const { contentBlocks, entityMap } = draftValue;
  const contentState = ContentState.createFromBlockArray(
    contentBlocks,
    entityMap
  );

  return EditorState.createWithContent(contentState);
};

const Test = () => {
  const [tabIndex, setTabIndex] = useState(0);
  const [editorState, setEditorState] = useState(toDraft('Hello, world!'));

  return (
    <Fragment>
      <Tabs
        centered={true}
        indicatorColor="primary"
        onChange={(evt: any, value: number) => {
          setTabIndex(value);
        }}
        textColor="primary"
        value={tabIndex}
      >
        <Tab label="Editor" value={0} />
        <Tab label="One" value={1} />
      </Tabs>
      <div>
        {tabIndex === 0 ? (
          <div>
            <Editor
              editorState={editorState}
              onEditorStateChange={(value: any) => {
                setEditorState(value);
              }}
              toolbar={{
                inline: {
                  options: ['bold', 'italic', 'underline', 'strikethrough']
                },
                list: {
                  options: ['unordered', 'ordered']
                },
                options: ['inline', 'blockType', 'list', 'textAlign'],
                textAlign: {
                  options: ['left', 'center', 'right']
                }
              }}
            />
          </div>
        ) : null}
        {tabIndex === 1 ? <div>One</div> : null}
      </div>
    </Fragment>
  );
};

export default Test;

[bmueller-sykes]

FWIW, this issue still exists in 1.14.4

[jpuri]

@bmueller-sykes: I will check this soon.

[jpuri]

@bmueller-sykes : can you plz share complete trace of warning. I am not able to replicate issue and even find which code change may be causing this.

[bmueller-sykes]

@jpuri Hopefully this is useful. Let me know if I can provide any further detail. I'm sorry to say the error message itself is pretty vague.

[milkysingh]

@jpuri any solutions to this warning yet?

[MiadV]

I have the same issue when using inside MUI Tab

[oikantik]

Same issue. As soon as I focus i.e try to type into the box, I see those errors in console log.

https://codesandbox.io/s/brave-gareth-pwrlz?file=/src/App.js

[rafayetn]

Did anyone find any solution to this?

[megarg]

I am getting this error even without material UI. Is there any solution?

[bmueller-sykes]

@oikantik to be clear, it doesn't actually go away on production--React just doesn't report errors in production environments, for performance and security reasons.

[charlesomer]

@jpuri Are you able to take a look at some of the PR which might fix this please? (#1044 & #1008) There are now a few issues around which I think relate to the same problem (#953, #951 & #918). I'd like to use this for an application but this issue is currently preventing me (and I'm sure others too). Thank you 😄

[absingh927]

@jpuri any chance the PRs can be looked at, it would solve a few issues pretty quickly! 😄

[bmueller-sykes]

@nick4fake Any chance you can add the Typescript definitions to the @types repo? Here's the one for react-draft-wysiwyg

https://www.npmjs.com/package/@types/react-draft-wysiwyg

[amarjeet987]

@nick4fake Thanks man, works like a charm.