Merge pull request #435 from remy727/feature/modal

Close modal when clicking outside
baoagency · Jul 30, 2024 · 4ecbb10 · 4ecbb10
2 parents b115343 + 4d4aba6
commit 4ecbb10
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/app/assets/javascripts/polaris_view_components.js b/app/assets/javascripts/polaris_view_components.js
@@ -833,7 +833,8 @@ class Modal extends Controller {
   }
   open() {
     this.element.classList.remove(this.hiddenClass);
-    this.element.insertAdjacentHTML("afterend", `<div class="${this.backdropClass}"></div>`);
+    const dropElement = `<div class="${this.backdropClass}" data-controller="polaris" data-target="#${this.element.id}" data-action="click->polaris#closeModal"></div>`;
+    this.element.insertAdjacentHTML("afterend", dropElement);
     this.backdrop = this.element.nextElementSibling;
   }
   close() {
@@ -878,6 +879,9 @@ class Polaris extends Controller {
   openModal() {
     this.findElement("modal").open();
   }
+  closeModal() {
+    this.findElement("modal").close();
+  }
   disableButton() {
     this.findElement("button").disable();
   }

diff --git a/app/assets/javascripts/polaris_view_components/modal_controller.js b/app/assets/javascripts/polaris_view_components/modal_controller.js
@@ -14,7 +14,8 @@ export default class extends Controller {
 
   open() {
     this.element.classList.remove(this.hiddenClass)
-    this.element.insertAdjacentHTML('afterend', `<div class="${this.backdropClass}"></div>`)
+    const dropElement = `<div class="${this.backdropClass}" data-controller="polaris" data-target="#${this.element.id}" data-action="click->polaris#closeModal"></div>`
+    this.element.insertAdjacentHTML('afterend', dropElement)
     this.backdrop = this.element.nextElementSibling
   }
 

diff --git a/app/assets/javascripts/polaris_view_components/polaris_controller.js b/app/assets/javascripts/polaris_view_components/polaris_controller.js
@@ -5,6 +5,10 @@ export default class extends Controller {
     this.findElement("modal").open()
   }
 
+  closeModal() {
+    this.findElement("modal").close()
+  }
+
   disableButton() {
     this.findElement("button").disable()
   }