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>
  );
}

Answer 1

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...

Answer 2

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

Answer 3

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

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

Answer 4

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