Multiselect v-model cleared when datasource is updated

[Ash Prescott]

Hi,

we are using the Vue MultiselectDropDown component to select multiple values. 

When we open a form which already has multiple values set for this field, it displays the values. However, when we click on the input to add or change the values saved, all of the original values are cleared from the v-model.

Our code is as follows;

<template>
  <ejs-multiselect
    ref="YMultiselectRef"
    :value="value"
    @change="$emit('input', $event.value)"
    @customValueSelection="customValueSelection"
    :dataSource='data'
    :fields='typeFields'
    :allowCustomValue='isAllowCustomValue'
    :placeholder="placeholder || 'Select multiple'"
    :allowFiltering="true"
    @filtering='onFiltering'
    @open="onFiltering"
    :hideSelectedItem="false"
    :valueTemplate='valueTemplate'
    :chipSelection="selectTag"
    mode="Box"
    cssClass="e-outline"
    floatLabelType="Auto"
    :changeOnBlur="false"
  ></ejs-multiselect>
</template>

<script>
import Vue from "vue";
import { MultiSelectPlugin } from "@syncfusion/ej2-vue-dropdowns";
Vue.use(MultiSelectPlugin);

export default {
  name: "YMultiselect",
  props: ['value', 'type', 'allowCustom', 'fields', 'valueTemplate', 'params', 'placeholder'],
  data() {
    return {
      data: [],
      types: {
        jobTags: {
          fields: { text: "name", value: "name" },
          // fields: {},
          url: '/admin/api/users/job-tags',
          allowCustom: true,
          storeCustomValue: {
            url: '/admin/api/users/job-tags',
            param: 'name',
          },
          params: { }
        },
        configurations: {
          fields: { text: "text", value: "text" },
          url: '/admin/api/dropdowns/configurations',
          allowCustom: false,
          params: { }
        },
        customerContacts: {
          fields: { text: "contact_text", value: "id" },
          url: '/admin/api/customers/contacts',
          customParams: true,
        },
        workflowStatuses: {
          fields: { text: "text", value: "text" },
          url: '/admin/api/dropdowns/workflow-statuses',
          allowCustom: false,
          params: { }
        },
        categories: {
          fields: { text: "text", value: "text" },
          url: '/admin/api/dropdowns/categories',
          allowCustom: false,
          params: { }
        },
        linkedToOrder: {
          fields: { text: "title_text", value: "id" },
          url: '/admin/order',
          allowCustom: false,
          params: { }
        },
        linkedToCompany: {
          fields: { text: "name", value: "id" },
          url: '/admin/company',
          allowCustom: false,
          params: { }
        },
        linkedToContact: {
          fields: { text: "text", value: "id" },
          url: '/admin/user',
          allowCustom: false,
          params: { }
        },
        linkedToJob: {
          fields: { text: "title_text", value: "id" },
          url: '/admin/jobs',
          allowCustom: false,
          params: { }
        },
      },
    };
  },
  watch: {
    value(val) {
      if(!val) {
        this.resetData();
      }
    }
  },
  computed: {
    typeUrl() {
      return this.types[this.type].url;
    },
    typeFields() {
      if(this.fields !== undefined) {
        return this.fields;
      }
      return this.types[this.type].fields;
    },
    typeParams() {
      if(this.types[this.type].customParams) {
        return this.params;
      }
      return this.types[this.type].params;
    },
    isAllowCustomValue() {
      if(this.allowCustom !== undefined) {
        return this.allowCustom;
      }
      return this.types[this.type].allowCustom;
    },
    customStoreUrl() {
      if(!this.types[this.type].allowCustom) return '';
      return this.types[this.type].storeCustomValue.url;
    },
    customStoreParam() {
      if(!this.types[this.type].allowCustom) return '';
      return this.types[this.type].storeCustomValue.param;
    },
  },
  methods: {
    async customValueSelection(e) {
      console.log('customValueSelection', e)
      // e.newData = {id:11, name:e.newData.name};
      // await this.storeCustomValue(e.newData.name);
      // e.cancel = false;
      // this.$refs.YMultiselectRef.addItem({id:999, name:'Tdstrererer'});
    },
    async storeCustomValue(val) {
      let form = {};
      form[this.customStoreParam] = val;
      try {
        const response = await axios.post(this.customStoreUrl, form);
        this.$notify.success('Success', response.data.msg)
        this.$emit('saved', response.data.data);

        // this.$refs.YMultiselectRef.addItem(response.data.data);
        this.data.push(response.data.data);
      } catch (e) {
        this.$notify.validation(e.response.data)
      }
    },
    setInitValue(value) {
      this.resetData();//new
      this.data = value;//new
      console.log('setInitValue',value)
      this.$refs.YMultiselectRef.addItem(value);
    },
    resetData() {
      this.data = [];
      this.$refs.YMultiselectRef.clear();//new
    },
    async getData(query) {
      let response = await axios.get(this.typeUrl, {
        params: {
          q: query,
          ...this.typeParams
        }
      });
      this.data = [];
      this.data = response.data.data;
      console.log('getData',this.data)
    },
    selectTag(args) {
      this.$emit('selectTag', args)
    },
    async onFiltering(e) {
      console.log('filter', e)
      if(e.name === 'open') {
      // if(e.name === 'open' && this.data.length === 0) {
        await this.getData(e.text)
        // e.updateData(this.data);
      }
      if(e.name === 'filtering') {
        e.preventDefaultAction = true;
        await this.getData(e.text)
        e.updateData(this.data);
      }
    },
  },
}
</script>

<style scoped>

</style>



<y-multiselect ref="form_task_order_entities_ref" @selectTag="selectTag" :valueTemplate='valueTemplateOrder' type="linkedToOrder" v-model="form.task_order_entities" placeholder="Order"></y-multiselect>

[Vinitha Jeyakumar]

Hi Ash,

We have tried to reproduce the reported issue using the code snippet you have shared. but we couldn't replicate the issue at our end. we have also prepared a sample for your reference,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vue22556456553

Can you please share the below details,

• Your package version.
• Are you using Multiselect dropdown as a custom component in main page?
• Video illustration of issue replication.
• If possible please share us with the runnable issue reproducing sample to further proceed on this issue.

Regards,

Vinitha

[Ash Prescott]

Hi,

• Your package version - 19.4.48
• Are you using Multiselect dropdown as a custom component in main page? - Yes, we are wrapping your component in our custom component which is being used on multiple pages.
• Video illustration of issue replication. - see video: 
• If possible please share us with the runnable issue reproducing sample to further proceed on this issue. - not sure we can do this at this point. 

thanks

[UdhayaKumar Duraisamy]

Hi Ash,

We have created a sample based on the shared information. We suspect you have reported the issue that when you clear the values from the second component, in the first component also values are cleared and when you type custom values in the first component and, in the second component when you choose values from popup the custom value is changed. We have also attached a video illustration for your reference. If we misunderstood the query, please share the below-mentioned details,

1. Exact issue details.

2. Video Illustration of the issue.

3. Issue replicating sample or modify the attached sample as per your scenario.

This will help us validate the issue further and provide you with a better solution.

Regards,

Udhaya Kumar D

Attachment: MultiselectCustomComponentVue_f5873d6b.zip

[Ash Prescott]

Hi, 

We have managed to fix the original issue - it was because when we were filtering the data, we were updated `dataSource` which was overwriting the selected values. We realised that this was mentioned in the documentation, but must have missed this on the first 

Thanks for your help

[UdhayaKumar Duraisamy]

Hi Ash,

Thanks for the update. Please get back to us if you need any further assistance on this.

Regards,

Udhaya Kumar D