Make modal close on click outside

[kkurcz]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

The property that adds modal toggle functionality on an element is data-modal-toggle="popup-modal. Originally it is on a button inside the modal. I added it to the div that is around the modal so that users can just click outside the modal to close.

<button class="..." type="button" data-modal-toggle="popup-modal">
    Open modal
</button>

+ <div data-modal-toggle="popup-modal" id="..." tabindex="-1" class="hidden ..." aria-modal="true" role="dialog">
    <div> modal content 
      <button type="button" class="..." data-modal-toggle="popup-modal">
        Close modal
      </button>
  </div> 
</div>

However now, when user clicks on the close button, the modal will toggle twice and not close (event bubble).

I used patch-package to patch [email protected] to stop event propagation as follows:

diff --git a/node_modules/flowbite/dist/flowbite.js b/node_modules/flowbite/dist/flowbite.js
index ad19e86..124c786 100644
--- a/node_modules/flowbite/dist/flowbite.js
+++ b/node_modules/flowbite/dist/flowbite.js
@@ -3028,8 +3028,9 @@ document.addEventListener('DOMContentLoaded', function () {
       modal.show();
     }
 
-    el.addEventListener('click', function () {
+    el.addEventListener('click', function (e) {
+      e.stopPropagation();
       modal.toggle();
     });
   });
 });

This issue body was partially generated by patch-package.