themesberg / flowbite

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

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

Open spaquet opened 2 weeks ago

spaquet commented 2 weeks ago

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