Tailwind Javascripts stop working after live redirects between liveviews

Phoenix Forum Questions / Help
,
1

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.

2

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

1 Like
3

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

4
  1. The repo only has 1 branch main. Did you forget to push the other one?
  2. 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.
1 Like
5

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

6

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

7

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
  }));
});
5 Likes
8

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

9

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

I can send a PR if you want

1 Like
10

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

11

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

2 Likes
12

Can you tell us what you’re doing that isn’t working?

This specific tailwind CDN is a kinda of JIT but in the web (you can see that it is a script, not a stylesheet), since it generates the css on the fly and live_redirects doesn’t reload the <head> and rerun the js the cdn probably is in some weird state, if you can install tailwind we can isolate the problem.

13

I did install tailwind based on this guide Install Tailwind CSS with Phoenix, then I installed Flowbite using npm i flowbite --prefix assets, add it to tailwind.config.js like this:

content: [
    './js/**/*.js',
    '../lib/*_web.ex',
    '../lib/*_web/**/*.*ex',
    './node_modules/flowbite/**/*.js'
  ],

then

plugins: [
    require('@tailwindcss/forms'),
    plugin(({ addVariant }) => addVariant('phx-no-feedback', ['&.phx-no-feedback', '.phx-no-feedback &'])),
    plugin(({ addVariant }) => addVariant('phx-click-loading', ['&.phx-click-loading', '.phx-click-loading &'])),
    plugin(({ addVariant }) => addVariant('phx-submit-loading', ['&.phx-submit-loading', '.phx-submit-loading &'])),
    plugin(({ addVariant }) => addVariant('phx-change-loading', ['&.phx-change-loading', '.phx-change-loading &'])),
    require('flowbite/plugin'),
  ]

and finally in app.js

import 'flowbite'
import "phoenix_html"
import { Socket } from "phoenix"
import { LiveSocket } from "phoenix_live_view"
import topbar from "../vendor/topbar"

This was my initial config, the flowbite components were working, but when I redirect to another LiveView they stop. I decided to use CDNs just for convenience as I had to spin up a sample project t test things out, and had to share a repo as you can see from above replies.

14

Hey all, the solution will be soon merged into Flowbite JS, see Support phoenix liveview by jmnda-dev · Pull Request #487 · themesberg/flowbite (github.com).

I’ve pasted my patch as a PR comment if you want to get going right now.

Cheers

2 Likes