DestroyedSoul
Flowbite dropdown not working after live view push_navigate
Hello,
I am using Flowbite in my code for a dropdown component.
I use Flowbite via CDN. Here’s the code in question:
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.phoenix.min.js">
</script>
<button
id="dropdownDefaultButton"
data-dropdown-toggle="dropdown"
class="bg-white hover:bg-accent/20 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center border"
type="button"
>
Click
</button>
<!-- Dropdown menu code -->
<div id="dropdown" class="z-10 hidden bg-background-secondary rounded-lg shadow w-60">
<ul class="p-3 space-y-1 text-lg text-primary" aria-labelledby="dropdownDefaultButton">
<!-- some code here -->
</ul>
</div>
The problem, as usually is with live views.
Let’s call the screen with dropwons Screen A. When I enter it, dropdown works, then I go to screen B and back to screen A → the dropdown works.
But when I go to screen B and push_navigate from there to Screen A, the dropdown does not work (i.e. it’s not displayed after clicking the button).
I have tried solutions from here: Tailwind Javascripts stop working after live redirects between liveviews
It did not help.
Could you please advise whether I am doing something wrong?
Marked As Solved
jmnda
I checkout out your repo and after testing, I think he issue is that you added the script tag for Flowbite in the LiveView markup instead of the root.html.heex. Putting it in the <head> of the root.html.heex resolves the issue, that’s because the script is loaded upfront so every navigate/patch which dispatches phx:page-loading-stop event after the update will initialize Flowbite js enabling the interactive elements like dropdowns, modals, and navbars to work.
Also Liked
DestroyedSoul
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex









