flowbite icon indicating copy to clipboard operation
flowbite copied to clipboard

Modal backdrop is duplicated and not properly removed when closing the modal using .hide() in Javascript

Open spaquet opened this issue 1 year ago • 0 comments

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:

  1. Import Tailwind and Flowbite to the project
  2. Create a modal in the HTML code as mentioned in the documentation
  3. When calling data-modal-hide="modalId" the 2 backdrops are removed
  4. 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.

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();
    }
  }

spaquet avatar Nov 05 '24 01:11 spaquet