Dropdown sidebar not working with Turbo Rails (Rails 7)
Hello,
I started project from Starter Kit for Rails 7 (bundle asset with Webpack) and activate turbo rails. Everything works fine but not with the dropdown. When click any dropdown (e.g. sidebar), it won't expand the menus. I even tried to change 'DOMContentLoaded' to 'turbolinks:load' on any assets, but also seems doesn't work. Is this template turbo rails friendly?
Please help me solve this issue
Thanks
Replies (9)
Hi Rudy,
Could you please check the console log if there is any JS error? Usually, the side menu won't expand if there is a JS error in the console log.
Thanks
Hi Faizal,
Yes, I did check the console log, and no error. For the newest update, the dropdown only work for the first load of the page, after click link which turbo handle the event, the dropdown does not work anymore. But if I inject code KTComponents.init() from the console log, the dropdown works like usual. I also tried to trigger this code so it will call KTComponents.init() after every turbo load:
document.addEventListener("turbo:load", function() {
console.log("turbo loaded")
KTComponents.init()
});But the console success to print "turbo loaded" text, but still the dropdown does not work (first load always work, but not with the next load or until I refresh the page) with no error.
Hi,
Please note that every KTMenu instance requires to be initialized by KTComponents.init() right after the KTMenu HTML is populated. So in your case for newly added KTMenu instances you will need to call KTComponents.init() at the right time when the HTML is populated and added to the DOM.
Regards.
Hi Sean,
Thanks for responding. Yes, I tried to call KTComponents.init() right after the KTMenu HTML is populated and also recall after turbo:load event which I am sure it means when the KTMenu added to the DOM. I am not sure where the mistake is, but for temporary fix, I disable turbolink usage.
Regards.
Hi,
You can track the error by testing the KTMenu HTML code with a simple DOM access or manipulation(alert(menuEl.innerHTML)) to it before calling KTComponents.init(). Most probably the KTMenu element is not in the DOM yet.
Regards.
The issue is that menu.js has a global variable of KTMenuHandlersInitialized and after the initial load this is set to true which prevents the menu from being initialized a second time (which is what we are trying to do).
if (KTMenuHandlersInitialized === false) {
KTMenu.initHandlers();
KTMenuHandlersInitialized = true;
}The workaround for this is explicitly calling `KTMenu.initHandlers()`
document.addEventListener("turbo:load", function() {
KTComponents.init()
KTMenu.initHandlers()
})This answer is what I was looking for. Thank you so much! I really appreciate that!
Great workaround! We will check this further for this requirement. Appreciate your contribution!
I'm running into the same issues. Where did you add the document.addEventListener?
If I add it to the Rails 7 stack, nothing happens. console.logs are shown if I add them to the function, but all Menu Dropdowns still stop working after loading the second page.
Appreciate you help! Thanks!
