Flowbite dropdown not working after live view push_navigate

Phoenix Forum Questions / Help
, ,
1

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?

2

I tried to reproduce on my end but everything is working fine. Can you share the whole LiveView or if possible create a demo repo?

3

Here’s the repo.

It’s even worse than in my project.
If you load the page as localhost:4000/view-b, then the dropdown works. If you go there from home or view-a, it doesn’t.

4

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.

5

That was it!
Thank you a lot.

1 Like