From b06ba60816ac188a0135aac58d6a387d0c28a694 Mon Sep 17 00:00:00 2001
From: "Phyks (Lucas Verney)" <phyks@phyks.me>
Date: Tue, 28 Aug 2018 14:49:21 +0200
Subject: [PATCH] Use singleclick event listener on map, fix #35

---
 src/components/Map.vue                |  9 +--------
 src/components/ReportDialog/index.vue | 15 +--------------
 2 files changed, 2 insertions(+), 22 deletions(-)

diff --git a/src/components/Map.vue b/src/components/Map.vue
index 5bd11d4..5f9048c 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -387,14 +387,7 @@ export default {
         });
 
         // Add click handler
-        this.map.on('click', this.handleClick);
-        // Take care that OpenLayer map actually catches "pointerdown"
-        // events and not "click" events. Then, we need an explicit event
-        // handler for "click" to stop propagation to ReportCard component.
-        document.querySelector('#map').addEventListener(
-            'click',
-            event => event.stopPropagation(),
-        );
+        this.map.on('singleclick', this.handleClick);
 
         // Show recenter button on dragging the map
         this.map.on('pointerdrag', () => {
diff --git a/src/components/ReportDialog/index.vue b/src/components/ReportDialog/index.vue
index 76bfe56..3cc2482 100644
--- a/src/components/ReportDialog/index.vue
+++ b/src/components/ReportDialog/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <ReportErrorModal v-model="hasError"></ReportErrorModal>
-        <v-bottom-sheet v-model="isActive" persistent id="reportCardSheet">
+        <v-bottom-sheet v-model="isActive" id="reportCardSheet">
             <v-card>
                 <v-container fluid>
                     <v-layout row wrap>
@@ -84,19 +84,6 @@ export default {
     },
     mounted() {
         window.addEventListener('keydown', this.hideReportDialogOnEsc);
-
-        // Use persistent mode and recreate the clicking outside event handler
-        // here as Vuetify uses capture mode which has some issues with
-        // OpenLayers events.
-        const app = document.querySelector('[data-app]') || document.body;
-        app.addEventListener(
-            'click',
-            (event) => {
-                if (this.isActive && event.target.closest('#reportCardSheet') === null) {
-                    this.isActive = false;
-                }
-            },
-        );
     },
     props: {
         value: Boolean,