[LiveComponent] TailwindCSS and Flowbite

[ag-erwan]

Hello everyone,

How are you ? Tell me, I use the TailwindCSS library with Flowbite, I added a Flowbite accordion. https://flowbite.com/docs/components/accordion/

I want to make it appear when a value in a form changes. But when it changes, well it appears but the JS does not work. How to make it work?

{% if form.nom.vars.value is not empty %}
  <div id="accordion-collapse" data-accordion="collapse">
      {% for role in roles %}
      <h2 id="accordion-collapse-heading-{{loop.index}}">
          <button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border {{ loop.last != true ? 'border-b-0' }} border-gray-200 {{ loop.index == 1 ? 'rounded-t-xl' }} focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-collapse-body-{{loop.index}}" aria-expanded="false" aria-controls="accordion-collapse-body-{{loop.index}}">
          <span>{{ role.libelle|upper }}</span>
          <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
          </svg>
          </button>
      </h2>
      <div id="accordion-collapse-body-{{loop.index}}" class="hidden" aria-labelledby="accordion-collapse-heading-{{loop.index}}">
          <div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
          <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
          </div>
      </div>
      {% endfor %}
  </div>
{% endif %}

[smnandre]

Hello @ag-erwan !

I'm sorry but i'm not sure... (maybe carsonbot made a mistake with the tag --that happens--)...

Is this related to Twig or Live Component ? If so, could you maybe give us some more context about your form ?

If this is something purely related to Flowbite, i think you would find more users & a quicker answer to your questions on the Flowbite repository, as we have not many Flowbite experts here :)

[ag-erwan]

Hello @smnandre, In fact, I use LiveComponent, with Autocomplete and Dynamics form, In fact when I put a value in my autocomplete it brings up the rest of my form, and it also brings up a Flowbite accordion. What I did as a temporary solution is that I put if the form is empty then it puts the hidden class of TailwindCSS otherwise it removes it.

<div id="accordion-collapse" data-accordion="collapse" class="grid 2xl:grid-cols-3 xl:grid-cols-2 gap-5 {{form.nom.vars.value is empty ? 'hidden'}}">

[smnandre]

So we can consider this issue solved ?

[ag-erwan]

@smnandre For my part, it's resolved but it's a bit of a patch, because the HTML code is executed and just hidden, whereas normally it shouldn't even exist until the form has been filled, but it could later for other people to help. I don't know if it's possible that you try to see one of these four why the javascript of other plugins is disabled when LiveComponent runs.

[smnandre]

It is not disabled. They don't re-run to find existing elements in the DOM i guess.

And that is not a Live Component problem here, more an integration one as i see it :)