diff --git a/src/composables/useOptions.js b/src/composables/useOptions.js index da8b003..eae4c0a 100644 --- a/src/composables/useOptions.js +++ b/src/composables/useOptions.js @@ -807,7 +807,11 @@ export default function useOptions (props, context, dep) } }) - watch(ev, (newValue) => { + // `eo` is used in `getOption`. + // `getOption` is used in `makeInternal`. + // `makeInternal` in this the callback` + // Therefore `eo` must be declared as source. + watch([ev, eo], ([newValue, _]) => { if (isNullish(newValue)) { update(makeInternal(newValue), false) return diff --git a/tests/unit/Multiselect.spec.js b/tests/unit/Multiselect.spec.js index b1dc60c..57fdaaa 100644 --- a/tests/unit/Multiselect.spec.js +++ b/tests/unit/Multiselect.spec.js @@ -1,10 +1,14 @@ import { createSelect, destroy, keyup, keydown, findAll, getValue } from 'unit-test-helpers' import { toBeVisible } from '@testing-library/jest-dom/matchers' -import { nextTick } from 'vue' +import { ref, nextTick, version } from 'vue' +import Multiselect from './../../src/Multiselect.vue' +import { mount } from '@vue/test-utils' import testSearch from './helpers/testSearch' expect.extend({toBeVisible}) +const describeVue3Only = (version.startsWith('3') ? describe : describe.skip) + describe('Multiselect', () => { describe('General', () => { it('should render Multiselect', () => { @@ -686,5 +690,31 @@ describe('Multiselect', () => { expect(getValue(select)).toStrictEqual([0,1]) }) }) + + describeVue3Only('Composition API', () => { + // This test is only possible with Vue 3 because the Composition API is used. + it('show selected option when added', async () => { + const values = ref(['option1']) + const options = ref(['option2']) + + const wrapper = mount(Multiselect, { + props: { + mode: 'tags', + value: values, + options: options, + // this is the default, it is set to highlight the fact + allowAbsent: false, + }, + }) + + options.value = ['option1', 'option2'] + values.value = ['option1', 'option2'] + + await nextTick() + + const selectedValues = wrapper.findAll(".multiselect-tag").map(tag => tag.text()) + expect(selectedValues).toEqual(['option1', "option2"]) + }) + }) }) }) \ No newline at end of file