Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

Dropdown inside Modal is not working


Hi all,
I am currently using Metronic with React (implemented as stated in the docs). I am using the latest TailwindCSS version.

The dropdown itself is working but if it is inside a modal, the click handler is not fired, even when calling KTDropdown.createInstances() manually. I debugged that inside the dropdown.js file.
The modal is dynamic (so the data changes on select of a model) and the dropdown is added whenever the modal is opened. I am using a useEffect to call the KTDropdown method. The dropdown is being initialised with data attributes.

Is this already a known bug or am I doing something wrong?

Kind regards


Text formatting options
Submit

Replies (4)


Hi,

May I know which version you are using? Metronic 9 HTML with React?

We have an official React version for Metronic v9 Tailwind. Please consider using the true react implementation of Metronic v9 Tailwind. You can download the latest Metronic v9.1.2 and use the react version with all react components.

Regards,
Sean



Hi,
I am using the latest Metronic 9 HTML version. I implemented it as hybrid version (using the provided docs).

I can have a look at the react components.
Weirdly the "mouseover" event is working with the dropdown inside the modal. The "click" event is not fired.

I will check with the original react implementation and give a feedback.

Kind regards,
Sebastian



Found my mistake:
My backdrop component prevented the dropdown event from firing.

Thanks for the help anyways.



Great! All the best with your project!


Text formatting options
Submit
Text formatting options
Submit