Dropdowns are not working using react-draft-wysiwyg in React JS

Question

I tried to use react-draft-wysiwyg using the docs

Some icons are displayed but not working : block type, font, font size,pickerColor (the dropdowns are not working). For example, the font size is set to 16 by defauft, but I can't change it...

import { Editor } from "react-draft-wysiwyg";
import { EditorState } from "draft-js";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

const TabContent = ({ name, typeProof }) => {
  const [text, setText] = useState(
  () => EditorState.createEmpty(),);


  return (
    <>
      <SafeAreaView>
        <Editor
          editorState={text}
          onEditorStateChange={setText}
          wrapperClassName="wrapperClassName"
          editorClassName="editorClassName"
          toolbarClassName="toolbarClassName"
          placeholder="Enter your text here:"
          style={{
           //some styles
          }}
          toolbar={{
            options: ['inline', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker', 'embedded', 'remove', 'history'],
            inline: { inDropdown: true },
            blockType: { inDropdown: true },
            fontSize: { inDropdown: true },
            fontFamily: { inDropdown: true },
            list: { inDropdown: true },
            textAlign: { inDropdown: true },
            colorPicker: { inDropdown: true },
            embedded: { inDropdown: true },
            remove: { inDropdown: true },
            history: { inDropdown: true },
         }}
        />
      </SafeAreaView>     
    </>
  );
};

export default function Tabs({ data }) {
  return (
    <TabsComponent forceRenderTabPanel>
      <TabList>
        {data.map(({ name }, i) => (
          <Tab key={name}>Question {i + 1}</Tab>
        ))}
      </TabList>
      {data.map(({ name, typeProof }) => (
        <TabPanel key={name}>
          <TabContent {...{ name, typeProof }} />
        </TabPanel>
      ))}
    </TabsComponent>
  );
}

score 2 · Accepted Answer · answered May 02 '22 at 12:45

2

Well that's weird, I have no explanation for that but I've changed only in index.js:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

by :

import "./index.css";
import App from "./App";
import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

Is there an explanation ? I would be glad to understand that...

answered May 02 '22 at 12:45

Zokulko

211
4
25

For react 17 you can't use createRoot , because it's a feature on React 18 , I am suspect that your React version wasn't React 18 – Hakob Sargsyan May 02 '22 at 13:15
I have React18, using createRoot works but if I use react-draft-wysiyg then it's not working, I have to change the index.js file. – Zokulko May 02 '22 at 13:45
Another hint for you [withCreateRoot](https://codesandbox.io/s/react-how-do-i-display-specific-data-from-json-that-fullfill-a-condition-forked-spothm) it works with createRoot render , difference is usage of StrictMode @Zokulko – Hakob Sargsyan May 02 '22 at 14:41
But, here in your code you're not using createRoot, but StrictMode as I posted – Zokulko May 02 '22 at 14:48
I have use const container = document.getElementById('root'); const root = createRoot(container); // createRoot(container!) root.render(); without Strict mode , it means problem related with strict mode – Hakob Sargsyan May 02 '22 at 14:53
Please check your link, [withCreateRoot](https://codesandbox.io/s/react-how-do-i-display-specific-data-from-json-that-fullfill-a-condition-forked-spothm?file=/src/index.js), in your index.js it's using StrictMode not CreateRoot – Zokulko May 02 '22 at 15:01
Try now , sorry forgot to save it [withCreateRoot](https://codesandbox.io/s/react-how-do-i-display-specific-data-from-json-that-fullfill-a-condition-forked-1egpmc?file=/src/index.js) – Hakob Sargsyan May 02 '22 at 15:16
Thanks I will leave as it is with StrictMode, that's what is advised on other forums! – Zokulko May 02 '22 at 17:57
I am having the same issue but when I use your solution (it works but) i get an error in the console: Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Are you seeing this? – thomasters Sep 17 '22 at 19:05

Hakob Sargsyan · Answer 2 · 2022-05-02T08:08:45.750

0

Try to replace your codes by this example SandboxExample

I think your Sandbox dependency configuration is not good also I have found something like this , what I did , I have create a new Sandbox add dependencies react-draft-wysiwyg and draft-js , import Editor and use it in the App component like you used on your files , and everything is worked , try to clear your app , read this npx Create React APP

My Sandbox example this is my Sandbox example with functional components

Hope it will be helpful for you

edited May 02 '22 at 08:08

answered May 01 '22 at 15:08

Hakob Sargsyan

1,294
1
9
15

Hi, is there an example using functions instead of class? – Zokulko May 01 '22 at 15:34
Maybe this link will be helpfull [Article](https://blog.logrocket.com/building-rich-text-editors-in-react-using-draft-js-and-react-draft-wysiwyg/) – Hakob Sargsyan May 01 '22 at 20:20
I've already check it :) – Zokulko May 01 '22 at 23:39
Read my answer update and check sandbox example @Zokulko – Hakob Sargsyan May 02 '22 at 08:05
That's weird I don't have this error, plus it's almost the same code that I have but still not working (I tried to insert it in my code), I don't know if I'm using an import that makes the use of wysiwyg disbable... – Zokulko May 02 '22 at 08:28
Enjoy [Your functional app with working dropdown](https://codesandbox.io/s/react-how-do-i-display-specific-data-from-json-that-fullfill-a-condition-forked-xys4jk?file=/src/Tabs.jsx) @Zokulko – Hakob Sargsyan May 02 '22 at 09:47
I have replace "react": "^17.0.2", "react-dom": "^17.0.2", dependencies , also have changes on index.js , try to understand what is happening on react-tabs , but now you will be sure that you have wrong dependencies. Hope these all will be helpful for you @Zokulko – Hakob Sargsyan May 02 '22 at 09:52
I think that createRoot is a new update for React 18, and maybe we need to remove all node modules and install again , or create a new sandbox – Hakob Sargsyan May 02 '22 at 12:47
Well that's weird, the dependencies can remain the same, but the index.js has to change ( your index.js is the same as mine (the one that doesn't work). But now, since I changed it, it works but I don't know why is it working this way... – Zokulko May 02 '22 at 12:48
When I create my sandbox , I have use create-react-app , and as I know installed version is React 17 also for REACT-DOM , in 17 version we can use ReacDom.render method , and it work for me by this way , on your example I saw usage of React 18 version , also for ReactDOM , with createRoot method in the index.js, I don't sure that react 18 was installed on sandbox , read https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis , where is the warning that we need to use createRoot ? Have you this warning on the console ? – Hakob Sargsyan May 02 '22 at 13:01
I mean have you got some deprication message ? @Zokulko – Hakob Sargsyan May 02 '22 at 13:03
I am happy that your problem solved – Hakob Sargsyan May 02 '22 at 13:17
No deprecation message, but thanks to your hint, I managed to solve it. Thanks man! – Zokulko May 02 '22 at 13:47
Have you already used Yup/Formik with react because I've opened a new issue [here1](https://stackoverflow.com/questions/72078650/react-how-do-i-raise-a-warning-if-a-specific-input-field-is-empty-with-yup) and [here2](https://stackoverflow.com/questions/72080906/react-turn-my-code-using-formik-or-textfield-if-i-want-to-use-yup). They are slighlty the same, if you can give me some hints please! – Zokulko May 02 '22 at 13:51

coderpolo · Answer 3 · 2023-01-12T09:52:54.540

0

also note that react strict mode causes this "dropdown options not showing" error :

https://github.com/jpuri/react-draft-wysiwyg/issues/1291#issuecomment-1203348769

edited Jan 12 '23 at 09:52

answered Jan 12 '23 at 01:35

coderpolo

307
3
12

score 0 · Answer 4 · answered Aug 25 '23 at 07:09

0

If you are using next js change reactStrictMode: false in next.config.js

answered Aug 25 '23 at 07:09

Shaikh Mohammaddanish

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 27 '23 at 17:13

Dropdowns are not working using react-draft-wysiwyg in React JS

4 Answers4

Linked