From e1d4d16526a8d5aa6cb73fbc12e43ff94d4cbe4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e=20Poussard?= <tpoussard@neogeo.fr>
Date: Thu, 19 Aug 2021 10:26:23 +0200
Subject: [PATCH] close dropdown at click anywhere else & at select

---
 src/components/Dropdown.vue       | 20 +++++++++++++++++---
 src/store/modules/feature_type.js |  4 ++--
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/Dropdown.vue b/src/components/Dropdown.vue
index a5f75d88..f5b41ba9 100644
--- a/src/components/Dropdown.vue
+++ b/src/components/Dropdown.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    id="custom-dropdown"
     :class="[
       'ui fluid search selection dropdown',
       { 'active visible': isOpen },
@@ -62,12 +63,14 @@ export default {
     };
   },
   methods: {
-    toggleDropdown(){
-      this.isOpen = !this.isOpen
+    toggleDropdown() {
+      this.isOpen = !this.isOpen;
     },
     select(index) {
       this.input = "";
-      this.isOpen = false; // * ne marche pas, car toggle dropdown est rappelé au même moment :-(
+      setTimeout(() => {
+        this.isOpen = false; // * quick & dirty, car toggle dropdown est rappelé plusieurs fois aileurs, à creuser...
+      }, 500);
       this.$emit("update:selection", this.options[index]);
     },
     searchOptions(options) {
@@ -86,6 +89,17 @@ export default {
       this.isOpen = true;
       this.clearSelected();
     },
+    clickOutsideDropdown(e) {
+      if (!e.target.closest("#custom-dropdown")) this.isOpen = false;
+    },
+  },
+
+  created() {
+    window.addEventListener("mousedown", this.clickOutsideDropdown);
+  },
+
+  beforeDestroy() {
+    window.removeEventListener("mousedown", this.clickOutsideDropdown);
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/store/modules/feature_type.js b/src/store/modules/feature_type.js
index d7161307..709d0b95 100644
--- a/src/store/modules/feature_type.js
+++ b/src/store/modules/feature_type.js
@@ -10,8 +10,8 @@ const feature_type = {
         geom_type: "point",
         title: "Éolienne",
         is_editable: true,
-        slug: "2-Éolienne",
-        feature_type: "2"
+        slug: "1-Éolienne",
+        feature_type: "1"
       },
       {
         geom_type: "linestring",
-- 
GitLab