Nested Dropdown on Metronic Tailwind
I'm currently working on the Metronic dropdown component and having issues with it. What it does is when I click on the Main Dropdown button, it shows the Main Dropdown content. But after the Main Dropdown is shown and I click on Inner Dropdown button, it dismisses the Main Dropdown content.
I want it to be isolated and trigger the dropdown content. How do I achieve it? Below is the sample code.
<div className="className" data-dropdown="true" data-dropdown-trigger="click">
<button className="dropdown-toggle btn btn-light">
Main Dropdown
</button>
<div className="dropdown-content w-full max-w-56 p-4">
<div className="className" data-dropdown="true" data-dropdown-trigger="click">
<button className="dropdown-toggle btn btn-light">
Inner Dropdown
</button>
<div className="dropdown-content w-full max-w-24 p-4">
<span>Inner Dropdown Content</span>
</div>
</div>
</div>
</div>
Replies (2)
Solution: Stop Click Propagation
When clicking the Inner Dropdown, it triggers an event that causes the Main Dropdown to close. To prevent this, stop event propagation using event.stopPropagation().
Sprunki Retake
Hi,
Sorry for the late reply.
May I know are you using Metronic 9 HTML/JS dropdown in your react app ?
Why don't use you Metronic 9 official react version with the similar UI ?
Please download the latest Metronic 9 and refer to vite version to launch the full Metronic React app.
Regards,
Sean
