themesberg / flowbite

Open-source UI component library and front-end development framework based on Tailwind CSS

Home Page:https://flowbite.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Modal doesn't work as expected when combined with HTMX

SimonaSvekjaroska-ZeroPlex opened this issue · comments

Describe the bug
I am trying to dynamically change the content of the modal with HTMX, when I trigger the modal it shows only for a split second and then it closes, leaving me only with the backdrop.
The button from where I am triggering the model is

<li> <a hx-get="{{ route('suppliers.edit', $supplier->id) }}" hx-swap="innerHTML" hx-trigger="click" hx-target="#static-modal-holder" hx-on::after-swap="showModalWindow('static-modal')" href="{{ route('suppliers.edit', ['id' => $supplier->id]) }}" data-modal-target="static-modal" data-modal-toggle="static-modal" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Edit</a> </li>

`function showModalWindow(id) {
initFlowbite();
const modal = FlowbiteInstances.getInstance('Modal', id);
modal.show();

        }`

It appears that after I try to open the model from the edit section, the model from Create opens up with the same content that I dynamically sent for Edit. Seems like the model is not initializing again but using the previous content.

on htmx swap, the event listeners are removed from the elements.