flowbite
flowbite copied to clipboard
Modal backdrop is duplicated and not properly removed when closing the modal using .hide() in Javascript
Describe the bug
The backdrop of the modal component is duplicated and not always removed when using .hide() method in a javascript.
Use case: creating a modal using Flowbite default feature leads to the backdrop duplication.
To Reproduce Steps to reproduce the behavior:
- Import Tailwind and Flowbite to the project
- Create a modal in the HTML code as mentioned in the documentation
- When calling data-modal-hide="modalId" the 2 backdrops are removed
- When calling
.hide()on the same modal (identified byFlowbiteInstances.getInstance('Modal', 'modalId');only one of the backdrop is removed and the status of the modal remains active
Expected behavior
The backdrop should not be duplicated, so that It's properly removed when closing the Modal using the .hide() method.
Additional context Tailwind version: 3.4.14 Flowbite version: 2.5.2
Workaround - calling the data-modal-hide from JS, works, but not super clean:
closeModal() {
const hideButton = document.querySelector('[data-modal-hide="modalId"]');
if (hideButton) {
hideButton.click();
}
}