Merge pull request #347 from webitel/fix/options-doesnt-set-from-valu…

…e-for-multiselect

Fix: Implement set options from value on multiselect component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.10.63",
+  "version": "24.10.64",
   "private": false,
   "scripts": {
     "dev": "vite",

src/components/wt-select/mixins/multiselectMixin.js

@@ -158,6 +158,7 @@ export default {
   created() {
     // load options only if not disabled
     if (!this.disabled) this.fetchOptions();
+
     this.fetchOptions = debounce(this.fetchOptions, 500);
   },
 };

src/components/wt-tags-input/__tests__/WtTagsInput.spec.js

@@ -28,6 +28,23 @@ describe('WtTagsInput', () => {
     expect(wrapper.emitted().input[0][0]).toEqual([tag]);
   });
 
+  it('by default when input taggable initialize options should set from value', () => {
+    const wrapper = mount(WtTagsInput, {
+      props: {
+        value: [
+          { label: 'Vue.js', text: 'JavaScript' },
+          { label: 'Vue2.js', text: 'JavaScript' },
+          { label: 'Vue3.js', text: 'JavaScript' }
+        ],
+        options: [
+          { label: 'Vue.js', text: 'JavaScript' }
+        ]
+      },
+    });
+    expect(wrapper.findComponent({ name: 'vue-multiselect' }).vm.$props.options.length).toEqual(3);
+  });
+
+
   it('in manual mode doesnt emit "input" event at native "tag" event', () => {
     const tag = '123';
     const wrapper = mount(WtTagsInput, {

src/components/wt-tags-input/wt-tags-input.vue

@@ -102,6 +102,8 @@
 </template>
 
 <script>
+import deepEqual from 'deep-equal';
+
 import multiselectMixin from '../wt-select/mixins/multiselectMixin.js';
 import taggableMixin from './mixin/taggableMixin.js';
 
@@ -153,7 +155,25 @@ export default {
       const label = this.getOptionLabel({ optionLabel, option });
       return typeof label === 'object' ? option.label : label;
     },
+    initializeOptions() {
+      if (!this.value) {
+        return [];
+      }
+
+      const newOptions = this.value.filter(valObj => {
+        return !this.options.find(option => {
+          return deepEqual(option, valObj)
+        });
+      });
+
+      this.options.unshift(...newOptions)
+    }
   },
+  created() {
+    if (!this.isApiMode) {
+      this.initializeOptions()
+    }
+  }
 };
 </script>