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 (1)
When working with nested dropdowns in Metronic Tailwind, it can be tricky to isolate the inner dropdown so it doesn’t dismiss the main dropdown content. One approach is to ensure the inner dropdown’s event doesn’t bubble up to the main dropdown. You might need to adjust the event handling or use custom JavaScript to manage the interactions properly.
By the way, if you ever need a quick break while debugging, checking out some fun games on poki can be a great way to refresh your mind. It’s a good way to stay productive while taking short breaks.
For your dropdown issue, double-check the event listeners and ensure the inner dropdown’s click event is stopped from propagating. This should help achieve the desired behavior.
