Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
spaquet opened this issue Nov 5, 2024 · 0 comments

Comments

@spaquet
Copy link

spaquet commented Nov 5, 2024

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();
    }
  }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant