search

themesberg / flowbite

Open-source UI component library and front-end development framework based on Tailwind CSS
https://flowbite.com
MIT License
7.3k stars 710 forks source link

Modal doesn't work as expected when combined with HTMX #823

Open SimonaSvekjaroska-ZeroPlex opened 4 months ago

SimonaSvekjaroska-ZeroPlex commented 4 months ago

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.

sumantagogoi commented 3 months ago

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