Close list dropdown when clicking outside of it

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;
   }
 

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

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);
+  };
+});