Tailwind Javascripts stop working after live redirects between liveviews

jmnda

Am using tailwind CSS and Flowbite component library. However what’s happening is that when loading a LiveView page and interact with a Flowbite component like a Modal, it’s working fine, but if I redirect to another LiveView and back to the same page, the Modal stops working. This applies to all elements that require Flowbite javascript for interaction like Accordions, Modals, Sidebars e.t.c. I tried to use CDN’s since configuring tailwind in my phoenix project was not working as well. Even after adding CDN’s, the problem still persists. Here is what I added to root.html.heex

<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://unpkg.com/flowbite@1.5.3/dist/flowbite.min.css" />

<body>
. . . 

<script src="https://unpkg.com/flowbite@1.5.3/dist/flowbite.js"></script>
</body>

But when I use Bootstrap CSS and JS CDN’s, all the bootstrap components that use javascript work fine even if I navigate between LiveViews. Not sure what’s going on but need help ASAP.

13 comments

/phoenix #liveview #tailwindcss

0 3859 13

2023-04-09 13:54:03 UTC

Showing Posts 1 to 10

Show Best Posts
Show All (oldest first)
Show All (newest first)

egze

Can you create a demo repo to reproduce? Otherwise, it’s hard to help.

Post #1

jmnda

I have created a demo repo, you can switch between main and bootstrap branches to test things out and understand what am talking about. Thanks.
https://github.com/jmnda-dev/demo-repo

Post #2

egze

The repo only has 1 branch main. Did you forget to push the other one?
For me, it works, clicking between liveviews and modals always work and also accordions. Is there anything specific I need to do to reproduce it? Record a video, maybe.

Post #3

jmnda

Oh I forgot. Let me push it and create a gif

Post #4

jmnda

I push the branch. I have added a gif to the repo Readme since the gif was too large to upload here

Post #5

egze

Flowbite inits the objects when the DOM loads (DOMContentLoaded event). With live navigation, this event doesn’t fire anymore, that’s why on next LiveView it stops working.

What you can do as a quick fix, is listen to LiveView events and dispatch the DOMContentLoaded event yourself, to trick Flowbite.

Put this in your app.js

window.addEventListener('phx:page-loading-stop', (event) => {
  // trigger flowbite events
  window.document.dispatchEvent(new Event("DOMContentLoaded", {
    bubbles: true,
    cancelable: true
  }));
});

Post #6

jmnda

I have tried it, but unfortunately, it has not worked. I even tried adding phx-click={JS.dispatch("DOMContentLoaded")} to a button, the event was successfully being dispatched but still the flowbite components won’t work

Post #7

egze

Did you try the exact code I wrote? Because it works for me.

I can send a PR if you want

Post #8

jmnda

Yeah, I tried the exact code. A PR is welcome . Maybe am doing something wrong

Post #9

jmnda

Actually, it’s working. I didn’t realize I was testing it in the actual project and was not working, but it’s working it the repo I shared. I have also discovered that it’s only working when I add Flowbite via a CDN script tag, but not when I install it as a node_module and import it in app.js and add it to tailwind.config.js plugins. and content. Thanks very much for the help. For now, I will just work with the CDN and figure out the rest later

Post #10

Load more posts (3 remaining)