adapt dropdown with clearable option

src/components/Dropdown.vue

@@ -20,7 +20,10 @@
       ref="input"
     />
     <div v-if="!input" class="default text">{{ selected }}</div>
-    <i class="dropdown icon"></i>
+    <i
+      :class="['dropdown icon', { clear: clearable && selected }]"
+      @click="clear"
+    ></i>
     <div :class="['menu', { 'visible transition': isOpen }]">
       <div
         v-for="(option, index) in processedOptions || ['No results found.']"
@@ -41,7 +44,14 @@
 export default {
   name: "Dropdown",
 
-  props: ["options", "selected", "disabled", "search", "placeholder"],
+  props: [
+    "options",
+    "selected",
+    "disabled",
+    "search",
+    "placeholder",
+    "clearable",
+  ],
 
   computed: {
     processedOptions: function () {
@@ -71,14 +81,16 @@ export default {
   methods: {
     toggleDropdown(val) {
       if (this.isOpen) {
-        this.input = "";
+        this.input = ""; // * clear input field when closing dropdown
       } else if (this.search) {
-        //* put the focus on input if is a search dropdown
+        //* 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 = val !== undefined ? val : !this.isOpen;
+      this.isOpen = typeof val === "boolean" ? val : !this.isOpen;
     },
 
     select(index) {
@@ -96,6 +108,14 @@ export default {
       );
     },
 
+    clear() {
+      if (this.clearable) {
+        this.input = "";
+        this.$emit("update:selection", "");
+        if (this.isOpen) this.toggleDropdown(false);
+      }
+    },
+
     clickOutsideDropdown(e) {
       if (!e.target.closest(`#custom-dropdown${this.identifier}`))
         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">