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 by FlowbiteInstances.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.
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:
.hide()
on the same modal (identified byFlowbiteInstances.getInstance('Modal', 'modalId');
only one of the backdrop is removed and the status of the modal remains activeExpected 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: