Close mobile list when clicking outside

It will only close if there's a click on the map, not on the markers

src/components/elements/MapMarkers.vue

@@ -59,6 +59,7 @@ function onClusterClick(center: Point, proposedZoom: number) {
   <CustomMarker
     v-for="({ lat, lng, count, expansionZoom, id }) in clusters" :key="id"
     :options="{ position: { lat, lng }, anchorPoint: 'CENTER' }"
+    data-custom-marker
   >
     <div class="grid text-sm font-bold text-white transition-colors rounded-full shadow cursor-pointer aspect-square place-content-center bg-space hover:bg-[#35395A] focus:bg-[#35395A] ring-white/20 ring-2 ring-offset-1 ring-offset-white/40" :style="`width: clamp(24px, ${0.24 * count + 24}px, 48px); font-size: clamp(14px, ${0.14 * count + 4}px, 18px)`" @click="onClusterClick({ lat, lng }, expansionZoom)">
       {{ count < 100 ? count : '99+' }}
@@ -98,6 +99,7 @@ function onClusterClick(center: Point, proposedZoom: number) {
   <CustomMarker
     v-for="location in singles" :key="location.uuid"
     :options="{ position: { lng: location.lng, lat: location.lat }, anchorPoint: showSingleName ? 'LEFT_CENTER' : 'CENTER' }"
+    data-custom-marker
   >
     <ReuseTemplate v-if="isMobile" :location="location" @click="selectedUuid = location.uuid" />
 

src/components/elements/MobileList.vue

@@ -2,9 +2,11 @@
 import { type PropType, nextTick, onMounted, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { type Location, Theme } from 'types'
+import { useEventListener } from '@vueuse/core'
 import { useLocations } from '@/stores/locations'
 import SheetModal from '@/components/atoms/SheetModal.vue'
 import Card from '@/components/elements/Card.vue'
+import { useMap } from '@/stores/map'
 
 defineProps({
   locations: {
@@ -13,7 +15,7 @@ defineProps({
   },
 })
 
-defineEmits({
+const emit = defineEmits({
   closeList: () => true,
 })
 
@@ -93,6 +95,12 @@ watch(cards, (newCards, oldCards) => {
   if (newCards && newCards.length > 0)
     newCards.forEach(card => observer.observe(card))
 }, { deep: true })
+
+const { mapInstance } = storeToRefs(useMap())
+useEventListener(mapInstance.value?.$el, 'click', (event: MouseEvent) => {
+  if (!(event.target as HTMLElement).closest('[data-custom-marker]'))
+    emit('closeList')
+})
 </script>
 
 <template>
@@ -103,6 +111,7 @@ watch(cards, (newCards, oldCards) => {
   >
     <li
       v-for="location in locations" :key="location.uuid" ref="cards"
+
       class="relative shrink-0 snap-center first:pl-[var(--spacing)] last:pr-[var(--spacing)] pointer-events-auto"
       :data-card-uuid="location.uuid"
     >