Release v2.0.2

Author: GrimLink

CHANGELOG.md

@@ -6,6 +6,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.0.2] - 2025-03-10
+### Added
+- Support for form method dialog
+
+### Fixed
+- Incorrect handeling of the backdrop click event, causing errors with the enter key inside a form
+
 ## [2.0.0] - 2024-02-21
 ### Changed
 - renamed name from `x-dialog` to `x-htmldialog` to not conflict with Alpine UI name

dist/index.cjs

@@ -33,9 +33,17 @@ function dialog_default(Alpine) {
     el.style.display = null;
     el.hidden = false;
     el.style.length === 0 && el.removeAttribute("style");
+    el.addEventListener("keydown", escapeDialog);
+    el.addEventListener("mousedown", backdropDialog);
+    el.addEventListener("submit", methodDialog);
     function scrollLock(use = true) {
       document.body.style.overflow = use ? "hidden" : "";
     }
+    function methodDialog(event) {
+      if (event.target.getAttribute("method") === "dialog" || event.submitter && event.submitter.getAttribute("formmethod") === "dialog") {
+        evaluate();
+      }
+    }
     function escapeDialog(event) {
       if (event.key !== "Escape") return;
       event.preventDefault();
@@ -50,20 +58,17 @@ function dialog_default(Alpine) {
     el._x_doShow = () => {
       if (el.hasAttribute("open")) return;
       el.showModal();
-      document.addEventListener("keydown", escapeDialog);
-      el.addEventListener("click", backdropDialog);
       scrollLock(lockPageScroll);
     };
     el._x_doHide = () => {
       if (!el.hasAttribute("open")) return;
       el.close();
-      document.removeEventListener("keydown", escapeDialog);
-      el.removeEventListener("click", backdropDialog);
       scrollLock(false);
     };
     cleanup(() => {
-      document.removeEventListener("keydown", escapeDialog);
-      el.removeEventListener("click", backdropDialog);
+      el.removeEventListener("keydown", escapeDialog);
+      el.removeEventListener("mousedown", backdropDialog);
+      el.removeEventListener("submit", methodDialog);
       scrollLock(false);
     });
   }

dist/index.js

@@ -9,9 +9,17 @@
       el.style.display = null;
       el.hidden = false;
       el.style.length === 0 && el.removeAttribute("style");
+      el.addEventListener("keydown", escapeDialog);
+      el.addEventListener("mousedown", backdropDialog);
+      el.addEventListener("submit", methodDialog);
       function scrollLock(use = true) {
         document.body.style.overflow = use ? "hidden" : "";
       }
+      function methodDialog(event) {
+        if (event.target.getAttribute("method") === "dialog" || event.submitter && event.submitter.getAttribute("formmethod") === "dialog") {
+          evaluate();
+        }
+      }
       function escapeDialog(event) {
         if (event.key !== "Escape") return;
         event.preventDefault();
@@ -26,20 +34,17 @@
       el._x_doShow = () => {
         if (el.hasAttribute("open")) return;
         el.showModal();
-        document.addEventListener("keydown", escapeDialog);
-        el.addEventListener("click", backdropDialog);
         scrollLock(lockPageScroll);
       };
       el._x_doHide = () => {
         if (!el.hasAttribute("open")) return;
         el.close();
-        document.removeEventListener("keydown", escapeDialog);
-        el.removeEventListener("click", backdropDialog);
         scrollLock(false);
       };
       cleanup(() => {
-        document.removeEventListener("keydown", escapeDialog);
-        el.removeEventListener("click", backdropDialog);
+        el.removeEventListener("keydown", escapeDialog);
+        el.removeEventListener("mousedown", backdropDialog);
+        el.removeEventListener("submit", methodDialog);
         scrollLock(false);
       });
     }

dist/index.min.js

@@ -8,9 +8,17 @@ function dialog_default(Alpine) {
     el.style.display = null;
     el.hidden = false;
     el.style.length === 0 && el.removeAttribute("style");
+    el.addEventListener("keydown", escapeDialog);
+    el.addEventListener("mousedown", backdropDialog);
+    el.addEventListener("submit", methodDialog);
     function scrollLock(use = true) {
       document.body.style.overflow = use ? "hidden" : "";
     }
+    function methodDialog(event) {
+      if (event.target.getAttribute("method") === "dialog" || event.submitter && event.submitter.getAttribute("formmethod") === "dialog") {
+        evaluate();
+      }
+    }
     function escapeDialog(event) {
       if (event.key !== "Escape") return;
       event.preventDefault();
@@ -25,20 +33,17 @@ function dialog_default(Alpine) {
     el._x_doShow = () => {
       if (el.hasAttribute("open")) return;
       el.showModal();
-      document.addEventListener("keydown", escapeDialog);
-      el.addEventListener("click", backdropDialog);
       scrollLock(lockPageScroll);
     };
     el._x_doHide = () => {
       if (!el.hasAttribute("open")) return;
       el.close();
-      document.removeEventListener("keydown", escapeDialog);
-      el.removeEventListener("click", backdropDialog);
       scrollLock(false);
     };
     cleanup(() => {
-      document.removeEventListener("keydown", escapeDialog);
-      el.removeEventListener("click", backdropDialog);
+      el.removeEventListener("keydown", escapeDialog);
+      el.removeEventListener("mousedown", backdropDialog);
+      el.removeEventListener("submit", methodDialog);
       scrollLock(false);
     });
   }

dist/index.mjs

@@ -1,6 +1,6 @@
 {
   "name": "@fylgja/alpinejs-dialog",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Bring the power of AlpineJs to the HTML dialog",
   "homepage": "https://fylgja.dev/",
   "author": "Fylgja",