Label text doesn't change if options updated about multiselect HOT 11 CLOSED

Often nextTick comes into play when dealing with watchers which in case we do. So I'd recommend simply putting the options.value change into nextTick and things should be fine.

from multiselect.

Btw just some small unrelated sidenote: You are a beast @adamberecz!! 🙌🤩🤗

from multiselect.

@vesper8 now things should be fine with 1.3.7. @vitalybaev I had to change watcher to flush: 'pre' so when you're changing options to a new language a tick will pass until the label will be refreshed.

from multiselect.

@adamberecz The fix is now causing a new issue (Maximum recursive updates exceeded)

See: (best to open in Chrome)

• demo v1.3.3: Selecting a tag will crash 🐞
• demo v1.3.2: Selecting a tag does not crash ✅

from multiselect.

In fact the infinite recursion occures because you're reading value.value in options computed, which makes value a dependency of options so it triggers recalculation even when value changes. And when you select a tag value does change, making options to change with the new fix which watches options and re-sets value upon change.

Now I added a fix that prevents that.

from multiselect.

Another issue (probably related to the changes introduced here) is when trying to remove an option which has already been selected. Using setTimeout in v1.3.4 fixes the issue (but was not necessary in v1.3.2).

See: (best to open in Chrome):

• demo v1.3.4: Removing selected tag crashes 🐞
• demo v1.3.2: Removing selected tag works ✅

May be related to #38

from multiselect.

@osi-oswald Are you still crashing?

I'm seeing crashes fairly often (whole page becomes unresponsive and fans start spinning like crazy) on 1.3.5 and 1.3.6.

It happens when I use the autocomplete search and then press enter (or click with the mouse) on one of the results which does nothing else but execute this code:

    onSelect(option) {
      // console.log('onselect.option', option);
      this.$emit('onSelect', option);
    },
    
    ...
    
    @onSelect="navigateToPage"
    
    ...
    
    navigateToPage(e) {
        this.$router.push(e.url);
    },

It works some of the times and other times it crashes but it's fairly easy to reproduce and not that rare

from multiselect.

It's happening constantly now but only on some pages.. no idea what's going on.. no errors in console at all.. page becomes unresponsive, fans spinning, can't reload, can't , can't ctrl-w/cmd-w, all I can do is X the page.

I tried wrapping my this.$emit code in this.nextTick but that didn't help neither

from multiselect.

Do you have any code to reproduce?

from multiselect.

not really man. Best I can do is share my component maybe the answer lies in there. I've moved back to shentao/vue-multiselect for now.

<template>
  <div class="tw-flex tw-flex-col tw-flex-items-center tw-flex-justify-center">
    <multiselect
      v-model="selected"
      :searchable="true"
      :caret="false"
      :max-height="500"
      :placeholder="placeholder"
      :filter-results="false"
      :min-chars="1"
      :resolve-on-load="options.allowEmptySearch"
      :delay="200"
      :track-by="options.trackBy"
      :value-prop="options.valueProp"
      :label="options.label"
      :limit="options.limit"
      :options="async function(query) {
        return await asyncFindApi(query)
      }"
      :object="true"
      :no-results-text="options.noResults"
      :no-options-text="options.noOptions"
      class="tw-text-white lg:tw-w-96"
      @select="onSelect"
    >
      <template #option="{ option }">
        <text-highlight
          :queries="[query]"
          highlight-class="tw-p-0 tw-font-bold tw-text-gray-100 tw-bg-transparent"
        >
          {{ option.n }}
        </text-highlight>
      </template>
    </multiselect>
  </div>
</template>

<script>
import Vue from 'vue';
import TextHighlight from 'vue-text-highlight';

import multiselect from '@vueform/multiselect/dist/multiselect.vue2.js';

Vue.component('TextHighlight', TextHighlight);

export default {
  components: {
    multiselect,
  },

  props: {
    api: {
      type: String,
      default: '',
    },
    config: {
      type: Object,
      default: () => ({}),
    },
    placeholder: {
      type: String,
      default: 'Search',
    },
  },

  data() {
    return {
      query: '',
      selected: '',
      results: [],
      isLoading: false,

      defaultOptions: {
        valueProp: 'value',
        trackBy: 'n',
        label: 'n',
        limit: 20,
        allowEmptySearch: false,
        noResults: '',
        noOptions: '',
      },
    };
  },

  computed: {
    options() {
      return Object.assign(this.defaultOptions, this.config);
    },
  },

  methods: {
    onSelect(option) {
      this.$nextTick(() => {
        this.$emit('onSelect', option);
      });
    },

    async asyncFindApi(query) {
      this.query = query;

      const response = await this.$http.post(this.api, {
        query,
      });

      return response.data;
    },
  },
};
</script>

from multiselect.

Thanks, it helps! I was able to reproduce the bug, which is... very strange. Watcher keeps kicking in infinitely at useOptions.js@424 even though the value does not change. I need to do further investigation, though it seems like a Vue internal bug. A quick fix might be for anyone who gets here is to change sync to pre at useOptions.js@428.

from multiselect.