From 67ea768946f67d636deda4e4c66e0ec4a8328748 Mon Sep 17 00:00:00 2001
From: Remy Wang <remy.wang727@gmail.com>
Date: Fri, 26 Jul 2024 21:14:31 +0200
Subject: [PATCH 1/2] feat: close modal when clicking outside

---
 app/assets/javascripts/polaris_view_components.js           | 6 +++++-
 .../javascripts/polaris_view_components/modal_controller.js | 3 ++-
 .../polaris_view_components/polaris_controller.js           | 4 ++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/polaris_view_components.js b/app/assets/javascripts/polaris_view_components.js
index 531637d1..72b72a98 100644
--- 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-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
index 84f999f4..dcc5e4cb 100644
--- 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-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
index c3c56fbb..1d5670d7 100644
--- 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()
   }

From 4d4aba6e162bef96dc2b7f45bd4b52e00e06f213 Mon Sep 17 00:00:00 2001
From: Remy Wang <remy.wang727@gmail.com>
Date: Sat, 27 Jul 2024 09:48:18 +0200
Subject: [PATCH 2/2] feat: add data controller and target

---
 app/assets/javascripts/polaris_view_components.js               | 2 +-
 .../javascripts/polaris_view_components/modal_controller.js     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/polaris_view_components.js b/app/assets/javascripts/polaris_view_components.js
index 72b72a98..598aa19c 100644
--- a/app/assets/javascripts/polaris_view_components.js
+++ b/app/assets/javascripts/polaris_view_components.js
@@ -833,7 +833,7 @@ class Modal extends Controller {
   }
   open() {
     this.element.classList.remove(this.hiddenClass);
-    const dropElement = `<div class="${this.backdropClass}" data-action="click->polaris#closeModal"></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/modal_controller.js b/app/assets/javascripts/polaris_view_components/modal_controller.js
index dcc5e4cb..2664f02c 100644
--- a/app/assets/javascripts/polaris_view_components/modal_controller.js
+++ b/app/assets/javascripts/polaris_view_components/modal_controller.js
@@ -14,7 +14,7 @@ export default class extends Controller {
 
   open() {
     this.element.classList.remove(this.hiddenClass)
-    const dropElement = `<div class="${this.backdropClass}" data-action="click->polaris#closeModal"></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
   }