Dropdown not working in modal react 18

[Pashaqwe]

When I try to open the dropdown list in a modal(antd), it does not open. If you try to open it in a non-modal window, then everything works correctly.

I noticed such a thing that if you try to open it not in a modal window, when you click it, ul appears, but in the modal window it is not in the tree

[Pashaqwe]

I figured out why the dropdown menus are not showing up. The problem is that usually modals are rendered outside of root element. This is the portal mechanism in react. In order for the dropdown to show up, you need to place the modal on the root element. In antd this can be achieved with getContainer={document.getElementById("root")}

Hope this helps someone

[Farooqkhanderghami]

is there any solution for this?

[Farooqkhanderghami]

Finally, I solve the problem; Just Past the bellow code in your index.js :)

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);
reportWebVitals();

[Pashaqwe]

The solution is to have your modal render in "root"

[vikas-Innvonix]

Have anyone has any idea how we can fix this problem in the next js version 13.4.2

[collinschaafsma]

I ran into the same issue porting a legacy react 17 app to a next 13 / react 18 app. here is the quick and dirty fix i made to make everything work in next and react 18 with strict mode. I'm sure there are better ways, but this does work. We ended up making a patch file and applying it to our application. You can easily do this with pnpm or yarn. I hope this helps others.

https://github.com/jpuri/react-draft-wysiwyg/pull/1392