From 02aea989be8cdc10506e9f9d98e692e13e4717fc Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 6 Jul 2023 15:00:29 +0200
Subject: [PATCH] Add on_click_outside behavior on dropdown_controller

"It's a Surprise Tool That Will Help Us Later"
---
 app/webpacker/controllers/dropdown_controller.js      | 11 +++++++++++
 spec/javascripts/stimulus/dropdown_controller_test.js | 11 +++++++++++
 2 files changed, 22 insertions(+)

diff --git a/app/webpacker/controllers/dropdown_controller.js b/app/webpacker/controllers/dropdown_controller.js
index 20b189398d..3160a77d24 100644
--- a/app/webpacker/controllers/dropdown_controller.js
+++ b/app/webpacker/controllers/dropdown_controller.js
@@ -5,6 +5,11 @@ export default class extends Controller {
 
   connect() {
     this.#hide();
+    document.addEventListener("click", this.#onBodyClick.bind(this));
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this.#onBodyClick);
   }
 
   toggle() {
@@ -15,6 +20,12 @@ export default class extends Controller {
     }
   }
 
+  #onBodyClick(event) {
+    if (!this.element.contains(event.target)) {
+      this.#hide();
+    }
+  }
+
   #show() {
     this.menuTarget.classList.remove("hidden");
     this.arrowTarget.dataset.collapsedClass.split(" ").forEach((className) => {
diff --git a/spec/javascripts/stimulus/dropdown_controller_test.js b/spec/javascripts/stimulus/dropdown_controller_test.js
index 3e6738f4cd..b72d449d0a 100644
--- a/spec/javascripts/stimulus/dropdown_controller_test.js
+++ b/spec/javascripts/stimulus/dropdown_controller_test.js
@@ -44,5 +44,16 @@ describe("Dropdown controller", () => {
       expect(arrow.classList.contains("expandedCLass2")).toBe(true);
       expect(arrow.classList.contains("collapsedClass")).toBe(false);
     });
+
+    it ("hide menu when click outside", () => {
+      const dropdown = document.getElementById("dropdown");
+      const menu = document.getElementById("menu");
+      dropdown.click();
+      expect(menu.classList.contains("hidden")).toBe(false);
+
+      document.body.click();
+
+      expect(menu.classList.contains("hidden")).toBe(true);
+    });
   });
 });