Merge pull request #1629 from bolt/bugfix/hide-empty-tag-in-multiselect

Make empty multiselect tag invisible
bolt · Jul 15, 2020 · 117629f · 117629f
2 parents 04d8bb1 + 5f084aa
commit 117629f
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git a/assets/js/app/editor/Components/Select.vue b/assets/js/app/editor/Components/Select.vue
@@ -27,7 +27,11 @@
         {{ props.option.value | raw }}
       </template>
       <template v-if="name !== 'status'" slot="tag" slot-scope="props">
-        <span @drop="drop($event)" @dragover="allowDrop($event)">
+        <span
+          :class="{ empty: props.option.value == '' }"
+          @drop="drop($event)"
+          @dragover="allowDrop($event)"
+        >
           <span
             :id="props.option.key"
             :key="props.option.value"

diff --git a/assets/scss/modules/editor/fields/_multiselect.scss b/assets/scss/modules/editor/fields/_multiselect.scss
@@ -1,15 +1,21 @@
-.multiselect__tag {
-  &__drag {
-    display: inline-flex;
+.multiselect__tags {
+  & span.empty {
+    display: none;
   }
 
-  border: 1px dashed transparent;
+  .multiselect__tag {
+    &__drag {
+      display: inline-flex;
+    }
 
-  &.dragover {
-    border-color: $bolt-bluegray;
-  }
+    border: 1px dashed transparent;
+
+    &.dragover {
+      border-color: $bolt-bluegray;
+    }
 
-  &.dragging {
-    opacity: 0.25;
+    &.dragging {
+      opacity: 0.25;
+    }
   }
 }