Prevent multi select options from being selected more than once (#2296)

* Update VSelect updateValue method to prevent value being selected more than once * Fix VSelect button styles * Revert random padding value change in _vselect.scss * Correct _vselect.scss for 3.x * Fix vselect button position * Fix merge with #2311 * Fix selected option padding for table filters --------- Co-authored-by: Quentin Renard <[email protected]>
area17 · Jan 25, 2024 · 2b4ab10 · 2b4ab10
1 parent d1dc668
commit 2b4ab10
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 14 deletions.
diff --git a/frontend/js/components/VSelect.vue b/frontend/js/components/VSelect.vue
@@ -39,13 +39,12 @@
 <script>
   import debounce from 'lodash/debounce'
 
+  // check full options of the vueSelect here : http://sagalbot.github.io/vue-select/
   import extendedVSelect from '@/components/VSelect/ExtendedVSelect.vue'
   import AttributesMixin from '@/mixins/addAttributes'
   import FormStoreMixin from '@/mixins/formStore'
   import InputframeMixin from '@/mixins/inputFrame'
   import randKeyMixin from '@/mixins/randKey'
-  // check full options of the vueSelect here : http://sagalbot.github.io/vue-select/
-  // import vSelect from 'vue-select' // check full options of the vueSelect here : http://sagalbot.github.io/vue-select/
   export default {
     name: 'A17VueSelect',
     mixins: [randKeyMixin, InputframeMixin, FormStoreMixin, AttributesMixin],
@@ -203,13 +202,21 @@
         return this.ajaxUrl !== ''
       },
       updateValue: function (value) {
-        // see formStore mixin
-        if (!value) {
-          const allOption = this.options.find((o) => o.value === 'all');
-          this.value = allOption ?? undefined
+        // Filter out duplicate values
+        if (this.multiple) {
+          // For multiple selection
+          this.value = [...new Set(value)];
         } else {
-          this.value = value
+          // For single selection
+          if (!value) {
+            const allOption = this.options.find((o) => o.value === 'all');
+            this.value = allOption ?? undefined
+          } else {
+            this.value = value
+          }
         }
+
+        // see formStore mixin
         this.saveIntoStore()
         this.$emit('change', value)
       },

diff --git a/frontend/scss/vendor/_vselect.scss b/frontend/scss/vendor/_vselect.scss
@@ -125,7 +125,7 @@ $multiSelectHeight: 45px;
     }
 
     .vs__selected-options {
-      padding: 0 15px;
+      padding: 0 30px 0 15px;
     }
 
     .vs__search {
@@ -322,7 +322,8 @@ $multiSelectHeight: 45px;
       margin:7px 0 0 10px;
       position:relative;
 
-      .close {
+      .close,
+      .vs__deselect {
         border-radius:50%;
         background-color:$color__fborder--hover;
         height: 18px;
@@ -337,12 +338,13 @@ $multiSelectHeight: 45px;
         font-weight:normal;
         position:absolute;
         right:5px;
-        top:6px;
+        top:15px;
         background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDEwIDEwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNFNUU1RTUiIGQ9Ik0yIDJsNiA2TTggMkwyIDgiLz48L3N2Zz4=);
         background-repeat: no-repeat;
         background-position: center;
 
-        span {
+        span,
+        svg {
           display:none;
         }
 
@@ -357,7 +359,8 @@ $multiSelectHeight: 45px;
     .selected-tag {
       padding-right: 15px;
 
-      .close {
+      .close,
+      .vs__deselect {
         display: none;
       }
     }
@@ -396,14 +399,16 @@ $multiSelectHeight: 45px;
         padding-right: 25px;
         @include font-small;
 
-        .close {
+        .close,
+        .vs__deselect {
           top:2px;
           right:2px;
           background-color:transparent;
           background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDEwIDEwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNhNmE2YTYiIGQ9Ik0yIDJsNiA2TTggMkwyIDgiLz48L3N2Zz4=);
           color:$color__fborder--hover;
 
-          span {
+          span,
+          svg {
             display:none
           }
         }