src/components/provenance/ProvenanceMap.vue

@@ -215,7 +215,10 @@
       name.className = 'provenance-popup-name'
       name.textContent = item.product.name
       row.appendChild(name)
-      row.addEventListener('click', () => onItemClick(item))
+      row.addEventListener('click', event => {
+        event.stopPropagation()
+        onItemClick(item)
+      })
       container.appendChild(row)
     })
     return container

tests/unit/components/provenance/ProvenanceMap.spec.js

@@ -18,6 +18,7 @@ const leaflet = vi.hoisted(() => {
       bindPopup: vi.fn(function () { return this }),
       setPopupContent: vi.fn(),
       openPopup: vi.fn(),
+      closePopup: vi.fn(),
       remove: vi.fn(),
       getLatLng: vi.fn(function () { return this.pos }),
       setLatLng: vi.fn(),
@@ -254,15 +255,19 @@ describe('ProvenanceMap', () => {
     expect(popupEl.textContent).toContain('Arroz')
   })
 
-  it('al hacer clic en un producto del popup agrupado muestra su detalle en el marcador', async () => {
+  it('al hacer clic en un producto del popup agrupado muestra su detalle sin cerrar el popup ni propagar el clic al mapa', async () => {
     mountMap({ provenance: sameMuni })
     await flushPromises()
 
     const groupMarker = leaflet.markers[1]
     const popupEl = groupMarker.bindPopup.mock.calls[0][0]
+    let bubbled = false
+    popupEl.addEventListener('click', () => { bubbled = true })
     const item = popupEl.querySelector('[data-test="map-popup-item-1"]')
-    item.dispatchEvent(new Event('click'))
+    item.dispatchEvent(new MouseEvent('click', { bubbles: true }))
 
+    expect(bubbled).toBe(false)
+    expect(groupMarker.closePopup).not.toHaveBeenCalled()
     expect(groupMarker.setPopupContent).toHaveBeenCalledTimes(1)
     const detailEl = groupMarker.setPopupContent.mock.calls[0][0]
     expect(detailEl.textContent).toContain('Arroz')