clean

src/assets/styles/base.css

@@ -158,4 +158,48 @@ footer .ui.text.menu .item:not(:first-child) {
   border-radius: 3px;
   background-color: rgb(250, 241, 242);
   padding: 1rem;
+}
+
+/* ---------------------------------- */
+      /* ERROR LIST */
+/* ---------------------------------- */
+.multiselect__tags {
+  border: 2px solid #ced4da;
+}
+.multiselect__tags > .multiselect__input {
+  border: none !important;
+  font-size: 1rem !important;
+}
+
+.multiselect__placeholder {
+  color: #838383;
+  margin-bottom: 0px;
+  padding-top: 0;
+}
+
+.multiselect__single, .multiselect__tags, .multiselect__content, .multiselect__option {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 100%;
+}
+
+.multiselect__select {
+  z-index: 1 !important;
+}
+.multiselect__clear {
+  position: absolute;
+  right: 1px;
+  top: 8px;
+  width: 40px;
+  display: block;
+  cursor: pointer;
+  z-index: 9;
+  background-color: #fff;
+}
+.multiselect__spinner {
+  z-index: 2 !important;
+  background-color: #fff;
+  opacity: 1;
+  top: 2px;
 }
\ No newline at end of file

src/components/SearchFeature.vue

@@ -27,7 +27,7 @@
           class="multiselect__clear"
           @click.prevent.stop="selection = null"
         >
-          <b-icon-x font-scale="2" />
+          <i class="close icon"></i>
         </div>
       </template>
       <span slot="noResult">

src/components/feature/FeatureLinkedForm.vue

@@ -36,6 +36,8 @@
             :selection.sync="selected_feature_to"
           /> -->
           <SearchFeature
+            @select="selectFeatureTo"
+            @close="selectFeatureTo"
           />
           {{ form.feature_to.errors }}
         </div>
@@ -96,22 +98,22 @@ export default {
   },
 
   computed: {
-    featureOptions: function () {
-      return this.features
-        .filter(
-          (el) =>
-            el.feature_type.slug === this.$route.params.slug_type_signal && //* filter only for the same feature
-            el.feature_id !== this.$route.params.slug_signal //* filter out current feature
-        )
-        .map((el) => {
-          return {
-            name: `${el.title} (${el.display_creator} - ${this.formatDate(
-              el.created_on
-            )})`,
-            value: el.feature_id,
-          };
-        });
-    },
+    // featureOptions: function () {
+    //   return this.features
+    //     .filter(
+    //       (el) =>
+    //         el.feature_type.slug === this.$route.params.slug_type_signal && //* filter only for the same feature
+    //         el.feature_id !== this.$route.params.slug_signal //* filter out current feature
+    //     )
+    //     .map((el) => {
+    //       return {
+    //         name: `${el.title} (${el.display_creator} - ${this.formatDate(
+    //           el.created_on
+    //         )})`,
+    //         value: el.feature_id,
+    //       };
+    //     });
+    // },
 
     selected_relation_type: {
       // getter
@@ -123,28 +125,16 @@ export default {
         this.form.relation_type.value = newValue;
         this.updateStore();
       },
-    },
-
-    selected_feature_to: {
-      // getter
-      get() {
-        return this.form.feature_to.value.name;
-      },
-      // setter
-      set(newValue) {
-        this.form.feature_to.value = newValue;
-        this.updateStore();
-      },
-    },
+    }
   },
 
-  watch: {
-    featureOptions(newValue) {
-      if (newValue) {
-        this.getExistingFeature_to(newValue);
-      }
-    },
-  },
+  // watch: {
+  //   featureOptions(newValue) {
+  //     if (newValue) {
+  //       this.getExistingFeature_to(newValue);
+  //     }
+  //   },
+  // },
 
   methods: {
     formatDate(value) {
@@ -157,6 +147,10 @@ export default {
       this.$store.commit("feature/REMOVE_LINKED_FORM", this.linkedForm.dataKey);
     },
 
+    selectFeatureTo(e) {
+      this.form.feature_to.value = e;
+    },
+
     updateStore() {
       this.$store.commit("feature/UPDATE_LINKED_FORM", {
         dataKey: this.linkedForm.dataKey,