Use singleclick event listener on map, fix #35

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', () => {

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,