merige develop

src/components/Dropdown.vue

@@ -10,20 +10,17 @@
   >
     <input
       v-if="search"
+      v-model="input"
+      v-on:keyup.enter="select(0)"
+      v-on:keyup.esc="toggleDropdown(false)"
       class="search"
       autocomplete="off"
       tabindex="0"
-      @input="handelInput"
-      v-on:keyup.enter="select(0)"
-      v-model="input"
-      :placeholder="placeholder"
+      :placeholder="placehold"
+      ref="input"
     />
-    <!-- {{placeholder}} -->
-    <div class="default text">{{ selected || placeholder }}</div>
-    <i
-      :class="['dropdown icon', { clear: search && selected }]"
-      @click="clear"
-    ></i>
+    <div v-if="!input" class="default text">{{ selected }}</div>
+    <i class="dropdown icon"></i>
     <div :class="['menu', { 'visible transition': isOpen }]">
       <div
         v-for="(option, index) in processedOptions || ['No results found.']"
@@ -66,38 +63,38 @@ export default {
       identifier: 0,
     };
   },
+  
   methods: {
-    toggleDropdown() {
-      this.isOpen = !this.isOpen;
+    toggleDropdown(val) {
+      if (this.isOpen) {
+        this.input = "";
+      } else if (this.search) {
+        //* put the focus on input if is a search dropdown
+        this.$refs.input.focus({
+          preventScroll: true,
+        });
+      }
+      this.isOpen = val !== undefined ? 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 = "";
     },
+
     searchOptions(options) {
       return options.filter((el) =>
         el.toLowerCase().includes(this.input.toLowerCase())
       );
     },
-    clear() {
-      if (this.search) {
-        this.input = "";
-        this.clearSelected();
-      }
-    },
-    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);
     },
   },