Merge branch 'redmine-issues/17474' into 'develop'

REDMINE_ISSUE-17474 | Ajouter un geocodeur ETALAB sur les cartes

See merge request !624

src/components/Map/Geocoder.vue

@@ -5,11 +5,13 @@
   >
     <button
       class="button-geocoder"
-      @click="toggleGeocoder"
       title="Rechercher une adresse"
+      @click="toggleGeocoder"
     >
       <i class="search icon" />
     </button>
+    <!-- internal-search should be disabled to avoid filtering options, which is done by the api calls anyway https://stackoverflow.com/questions/57813170/vue-multi-select-not-showing-all-the-options -->
+    <!-- otherwise approximate results are not shown (cannot explain why though) -->
     <Multiselect
       v-if="isExpanded"
       ref="multiselect"
@@ -18,7 +20,8 @@
       :options="addresses"
       :options-limit="limit"
       :allow-empty="true"
-      track-by="label"
+      :internal-search="false"
+      track-by="id"
       label="label"
       :show-labels="false"
       :reset-after="true"
@@ -196,6 +199,15 @@ export default {
 </script>
 
 <style lang="less">
+#marker {
+    width: 20px;
+    height: 20px;
+    border: 1px solid rgb(136, 66, 0);
+    border-radius: 10px;
+    background-color: rgb(201, 114, 15);
+    opacity: 0.7;
+}
+
 #geocoder-container {
   position: absolute;
   right: 6px;
@@ -244,16 +256,6 @@ export default {
       border-radius: 2px 0 0 2px;
     }
   }
-
-  #marker {
-    width: 20px;
-    height: 20px;
-    border: 1px solid rgb(136, 66, 0);
-    border-radius: 10px;
-    background-color: rgb(201, 114, 15);
-    opacity: 0.7;
-  }
-  
   // /* keep placeholder width when opening dropdown */
   .multiselect {
     min-width: 208px;

src/components/Map/Geolocation.vue

@@ -2,8 +2,8 @@
   <div class="geolocation-container">
     <button
       :class="['button-geolocation', { tracking }]"
-      @click.prevent="toggleTracking"
       title="Me localiser"
+      @click.prevent="toggleTracking"
     >
       <i class="crosshairs icon" />
     </button>