From b2220b83100c710856fd9c96b0a2b9a619855b23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Fri, 13 Mar 2026 13:40:28 +0400
Subject: [PATCH] Close list dropdown when clicking outside of it

---
 app/components/place-details.gjs       |  7 ++++++-
 app/components/place-lists-manager.gjs |  6 +++++-
 app/modifiers/on-click-outside.js      | 21 +++++++++++++++++++++
 3 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 app/modifiers/on-click-outside.js

diff --git a/app/components/place-details.gjs b/app/components/place-details.gjs
index 5ac2f18..bc405ef 100644
--- a/app/components/place-details.gjs
+++ b/app/components/place-details.gjs
@@ -49,7 +49,12 @@ export default class PlaceDetails extends Component {
   }
 
   @action
-  toggleLists() {
+  toggleLists(event) {
+    // Prevent this click from propagating to the document listener
+    // which handles the "click outside" logic.
+    if (event) {
+      event.stopPropagation();
+    }
     this.showLists = !this.showLists;
   }
 
diff --git a/app/components/place-lists-manager.gjs b/app/components/place-lists-manager.gjs
index 49ff73d..a41e7a8 100644
--- a/app/components/place-lists-manager.gjs
+++ b/app/components/place-lists-manager.gjs
@@ -4,6 +4,7 @@ import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import { fn } from '@ember/helper';
 import Icon from './icon';
+import onClickOutside from '../modifiers/on-click-outside';
 
 export default class PlaceListsManager extends Component {
   @service storage;
@@ -58,7 +59,10 @@ export default class PlaceListsManager extends Component {
   }
 
   <template>
-    <div class="place-lists-manager">
+    <div
+      class="place-lists-manager"
+      {{onClickOutside @onClose}}
+    >
       <div class="list-item master-toggle">
         <label>
           <input
diff --git a/app/modifiers/on-click-outside.js b/app/modifiers/on-click-outside.js
new file mode 100644
index 0000000..8b7dabe
--- /dev/null
+++ b/app/modifiers/on-click-outside.js
@@ -0,0 +1,21 @@
+import { modifier } from 'ember-modifier';
+
+export default modifier((element, [callback]) => {
+  const handler = (event) => {
+    // Check if the click target is contained within the element
+    if (element && !element.contains(event.target)) {
+      callback(event);
+    }
+  };
+
+  // Delay attaching the listener to avoid catching the opening click
+  // (using a microtask or setTimeout 0)
+  const timer = setTimeout(() => {
+    document.addEventListener('click', handler);
+  }, 0);
+
+  return () => {
+    clearTimeout(timer);
+    document.removeEventListener('click', handler);
+  };
+});