Merge branch 'redmine-issue/11833' into 'develop'

REDMINE_ISSUE-11833

See merge request geocontrib/geocontrib-frontend!82

src/components/Dropdown.vue

@@ -12,16 +12,26 @@
       v-if="search"
       v-model="input"
       v-on:keyup.enter="select(0)"
+<<<<<<< HEAD
+      v-on:keyup.esc="toggleDropdown(false)"
+=======
       @input="handelInput"
+>>>>>>> develop
       class="search"
       autocomplete="off"
       tabindex="0"
       :placeholder="placehold"
+<<<<<<< HEAD
+      ref="input"
+    />
+    <div v-if="!input" class="default text">{{ selected }}</div>
+=======
     />
     <!-- {{placeholder}} -->
     <div v-if="!input" class="default text">{{ selected || placeholder }}</div>
+>>>>>>> develop
     <i
-      :class="['dropdown icon', { clear: search && selected }]"
+      :class="['dropdown icon', { clear: clearable && selected }]"
       @click="clear"
     ></i>
     <div :class="['menu', { 'visible transition': isOpen }]">
@@ -44,7 +54,14 @@
 export default {
   name: "Dropdown",
 
-  props: ["options", "selected", "disabled", "search", "placeholder"],
+  props: [
+    "options",
+    "selected",
+    "disabled",
+    "search",
+    "placeholder",
+    "clearable",
+  ],
 
   computed: {
     processedOptions: function () {
@@ -70,15 +87,27 @@ export default {
       identifier: 0,
     };
   },
+
   methods: {
-    toggleDropdown() {
-      this.isOpen = !this.isOpen;
+    toggleDropdown(val) {
+      if (this.isOpen) {
+        this.input = ""; // * clear input field when closing dropdown
+      } else if (this.search) {
+        //* focus on input if is a search dropdown
+        this.$refs.input.focus({
+          preventScroll: true,
+        });
+      } else if (this.clearable && val.target && this.selected) {
+        this.clear(); //* clear selected and input
+      }
+      this.isOpen = typeof val === "boolean" ? val : !this.isOpen;
     },
 
     select(index) {
+      // * toggle dropdown is called several time, timeout delay this function to be the last
       setTimeout(() => {
-        this.isOpen = false; // * quick & dirty, car toggle dropdown est rappelé plusieurs fois aileurs, à creuser...
-      }, 500);
+        this.isOpen = false;
+      }, 0);
       this.$emit("update:selection", this.options[index]);
       this.input = "";
     },
@@ -90,24 +119,16 @@ export default {
     },
 
     clear() {
-      if (this.search) {
+      if (this.clearable) {
         this.input = "";
-        this.clearSelected();
+        this.$emit("update:selection", "");
+        if (this.isOpen) this.toggleDropdown(false);
       }
     },
 
-    clearSelected() {
-      this.$emit("update:selection", "");
-    },
-
-    handelInput() {
-      this.isOpen = true;
-      this.clearSelected();
-    },
-
     clickOutsideDropdown(e) {
       if (!e.target.closest(`#custom-dropdown${this.identifier}`))
-        this.isOpen = false;
+        this.toggleDropdown(false);
     },
   },
 

src/views/feature/Feature_list.vue

@@ -94,6 +94,7 @@
           :selected="form.type.selected"
           :selection.sync="form.type.selected"
           :search="true"
+          :clearable="true"
         />
       </div>
       <div class="field wide four column no-padding-mobile no-margin-mobile">
@@ -105,6 +106,7 @@
           :selected="form.status.selected.name"
           :selection.sync="form.status.selected"
           :search="true"
+          :clearable="true"
         />
       </div>
       <div class="field wide four column">