Flowbite with Turbo on rails7

[filser89]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

I got Flowbite working together with Turbo in my Rails 7 project. The original issue was that the javascript worked until the first turbo navigation was made and stoped working after that.

According to Turbo's documentaction this happened because Flowbite uses DOMContentLoaded event to install JS behavior, but this event only fires once, in response to the initial page load.
In order to install the JS behavior on every page change I replaced DOMContentLoaded to turbo:load event in dist/flowbite.js. turbo:load event fires on every page change.

I used patch-package to patch flowbite@1.3.3 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/flowbite/dist/flowbite.js b/node_modules/flowbite/dist/flowbite.js
index 92e66fc..3659e36 100644
--- a/node_modules/flowbite/dist/flowbite.js
+++ b/node_modules/flowbite/dist/flowbite.js
@@ -32,7 +32,7 @@ const rotateAccordionIcon = accordionHeaderEl => {
   }
 };
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('turbo:load', () => {
   document.querySelectorAll('[data-accordion]').forEach(function (accordionEl) {
     const accordionId = accordionEl.getAttribute('id');
     const collapseAccordion = accordionEl.getAttribute('data-accordion');
@@ -109,7 +109,7 @@ const toggleCollapse = (elementId, show = true) => {
   }
 };
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('turbo:load', () => {
   // Toggle target elements using [data-collapse-toggle]
   document.querySelectorAll('[data-collapse-toggle]').forEach(function (collapseToggleEl) {
     var collapseId = collapseToggleEl.getAttribute('data-collapse-toggle');
@@ -150,7 +150,7 @@ const toggleModal = (modalId, show = true) => {
 };
 
 window.toggleModal = toggleModal;
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('turbo:load', () => {
   document.querySelectorAll('[data-modal-toggle]').forEach(function (modalToggleEl) {
     var modalId = modalToggleEl.getAttribute('data-modal-toggle');
     var modalEl = document.getElementById(modalId);
@@ -172,7 +172,7 @@ document.addEventListener('DOMContentLoaded', () => {
 /***/ 454:
 /***/ (() => {
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('turbo:load', () => {
   document.querySelectorAll('[data-tabs-toggle]').forEach(function (tabsToggleEl) {
     const tabsToggleElementsId = tabsToggleEl.getAttribute('id');
     const tabsToggleElements = document.querySelectorAll('#' + tabsToggleElementsId + ' [role="tab"]');
@@ -2208,7 +2208,7 @@ var popper_createPopper = /*#__PURE__*/popperGenerator({
 
 ;// CONCATENATED MODULE: ./src/components/dropdown.js
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('turbo:load', () => {
   // Toggle dropdown elements using [data-dropdown-toggle]
   document.querySelectorAll('[data-dropdown-toggle]').forEach(function (dropdownToggleEl) {
     const dropdownMenuId = dropdownToggleEl.getAttribute('data-dropdown-toggle');
@@ -2256,7 +2256,7 @@ var tabs = __webpack_require__(454);
 var modal = __webpack_require__(508);
 ;// CONCATENATED MODULE: ./src/components/tooltip.js
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('turbo:load', () => {
   // Toggle dropdown elements using [data-dropdown-toggle]
   document.querySelectorAll('[data-tooltip-target]').forEach(function (tooltipToggleEl) {
     const tooltipEl = document.getElementById(tooltipToggleEl.getAttribute('data-tooltip-target'));

This issue body was partially generated by patch-package.

[seanbjornsson]

Thanks for posting this. I tested your solution on a local version of flowbite.js and it indeed fixed the problem I was having with the js not working.
(also on Rails 7)

[codenashwan]

thanks :)

[kkurcz]

works like a charm 👍

[skipmaple]

Worked for me on rails7 project, thanks :)

[spacerobotTR]

Wow thanks for posting this. Was just hooking up flowbite with rails 7 and hit this issue. Glad I stumbled on this. Fixed my issues.

[puglet5]

Also works with Turbolinks (5.2.0) with turbolinks:load. Thanks!

[blump]

For those using Webpack, a solution that works is to replace DOMContentLoaded by turbo:load in the ./node_modules/flowbite/dist/flowbite.js file

const replace = require('replace');
replace({
    regex: "DOMContentLoaded",
    replacement: "turbo:load",
    paths: ['./node_modules/flowbite/dist/flowbite.js'],
    recursive: true,
    silent: true,
});

[jsbaltodano]

this is old, but it would be easier if inside your own js, you trigger the DOMContentLoaded event inside the turbo:load event

// import "flowbite";
window.document.addEventListener('turbo:load', (event) => {
    // trigger flowbite events
    window.document.dispatchEvent(new Event("DOMContentLoaded", {
      bubbles: true,
      cancelable: true
    }));
});

[mikelieser]

Wouldn't it be even better if flowbite.js would have a .connect() method, that we could use it like this:

// import "flowbite";
window.document.addEventListener('turbo:load', (event) => {
    Flowbite.connect();
});

So no need to hack the flowbite.js and no need to trigger DOMContentLoaded again, as that could lead to other side effets?!

UPDATE: Or as an alternative: Provide an event that reconnects flowbite when triggered. like "document flowbite:reconnect" or something like that.