fix some infinite scroll issues

src/Multiselect.vue

@@ -10,7 +10,7 @@
     @mousedown.self="handleMousedown"
   >
     <select
-      v-model="selectedValues"
+      v-model="selectedOptionsRef"
       :multiple="multiple"
       v-bind="selectProps"
       class="hidden"
@@ -24,7 +24,6 @@
         :class="classList.search"
         v-bind="searchProps"
         data-cy="search-input"
-        @input="handleInput"
       >
     </template>
 
@@ -144,13 +143,11 @@
 
 <script lang="ts">
 import type {InputHTMLAttributes, PropType, SelectHTMLAttributes, SetupContext} from 'vue'
-import {defineComponent, toRefs, watch} from 'vue'
-import * as _ from 'lodash'
+import {defineComponent, toRefs} from 'vue'
 import useMultiselect from './utils/useMultiselect'
 import useDropdown from './utils/useDropdown'
 import useSearch from './utils/useSearch'
 import useOptions from './utils/useOptions'
-import useValue from './utils/useValue'
 import useClasses from './utils/useClasses'
 import type {Classes, Option} from './types'
 import useScroll from './utils/useScroll'
@@ -402,19 +399,55 @@ export default defineComponent({
     'loadMore': () => true,
   },
   setup(props, context: SetupContext) {
+    // const model = computed<unknown | Array<unknown>>({
+    //   get() {
+    //     // updates internal selectedValues if modelValue gets changed
+    //     return props.modelValue
+    //   },
+    //   set(newValue) {
+    //     context.emit('update:modelValue', newValue)
+    //   }
+    // })
+
+    // function getModel(selectedValues?: Ref<Array<unknown> | unknown>) {
+    //   if (!_.isEqual(props.modelValue, _.uniq(props.modelValue)))
+    //     model.value = _.uniq(props.modelValue)
+    //   if (selectedValues && selectedValues.value) {
+    //     if (props.modelValue !== selectedValues.value)
+    //       selectedValues.value = modelValue.value
+    //     if (!props.infinite) {
+    //       if (props.multiple && Array.isArray(selectedValues.value)) {
+    //         const correctSelected: Array<unknown> = []
+    //         selectedValues.value.forEach((selectedValue: unknown) => {
+    //           if (options.getOptionFromValue(selectedValue)) {
+    //             correctSelected.push(selectedValue)
+    //           }
+    //           if (!_.isEqual(correctSelected, selectedValues.value)) {
+    //             selectedValues.value = correctSelected
+    //             context.emit('update:modelValue', selectedValues.value)
+    //           }
+    //         })
+    //       }
+    //       else if (selectedValues.value && !options.getOptionFromValue(selectedValues.value)){
+    //         selectedValues.value = null
+    //         context.emit('update:modelValue', selectedValues.value)
+    //       }
+    //     }
+    //   }
+    //   return model
+    // }
+
     const {
       multiple, modelValue, searchable, disabled, closeOnSelect, selectOptions, displaySelectedValues,
-      optionValue, optionLabel, optionDisabled, optionSearchValue, classes, infinite, maxOptions,
+      optionValue, optionLabel, optionDisabled, optionSearchValue, classes, infinite, maxOptions, loadingOptions,
     } = toRefs(props)
-    const value = useValue(multiple, modelValue)
     const dropdown = useDropdown(context)
     const search = useSearch(context)
     const multiselect = useMultiselect(
       searchable,
       disabled,
       multiple,
       context,
-      value.selectedValues,
       dropdown.openDropdown,
       dropdown.closeDropdown,
       search.clearSearch,
@@ -431,14 +464,15 @@ export default defineComponent({
       optionLabel,
       optionDisabled,
       optionSearchValue,
+      infinite,
       context,
-      value.selectedValues,
       multiselect.deactivate,
       search.search,
     )
     const scroll = useScroll(
       infinite,
       maxOptions,
+      loadingOptions,
       selectOptions,
       context,
     )
@@ -452,20 +486,21 @@ export default defineComponent({
       multiselect.isActive,
     )
 
-    watch(() => props.selectOptions, (newOptions, oldOptions) => {
-      if (newOptions && newOptions.length > 0) {
-        for (const option of oldOptions) {
-          if (!_.some(newOptions, option as never) && options.isSelected(option, options.selectedOptions.value))
-            options.deselect(option)
-        }
-      }
-      else {
-        multiselect.clear()
-      }
-    })
+    // if (!props.infinite) {
+    //   watch(() => props.selectOptions, (newOptions, oldOptions) => {
+    //     if (newOptions && newOptions.length > 0) {
+    //       for (const option of oldOptions) {
+    //         if (!_.some(newOptions, option as Option) && options.isSelected(option, options.selectedOptions.value))
+    //           options.deselect(option)
+    //       }
+    //     }
+    //     else {
+    //       multiselect.clear()
+    //     }
+    //   })
+    // }
 
     return {
-      ...value,
       ...dropdown,
       ...search,
       ...options,

src/stories/MultiselectTester.stories.js

@@ -40,6 +40,6 @@ const Template = args => ({
 export const TesterComponent = Template.bind({})
 TesterComponent.args = {
   placeholder: 'huhu',
-  selectOptions: [{value: 1, label: 'Wie'}, {value: 'hallo', label: 'geht'}, {value: {nested: 'juhu'}, label: 'es'}, {value: true, label: 'dir'}],
+  selectOptions: [{value: 1, label: 'Wie'}, {value: 'hallo', label: 'geht'}, {value: {nested: 'juhu'}, label: 'es'}, {value: true, label: 'dir'}, {value: 3, label: 'du'}, {value: 4, label: 'bist'}, {value: 5, label: 'ganz'}, {value: 6, label: 'schön'}, {value: 7, label: 'cool'}],
   vModel: true,
 }

src/tests/MultiselectTester.vue

@@ -91,6 +91,15 @@
         Change select Options
       </button>
     </div>
+    <div v-if="infinite && dynamicOptions">
+      <button
+        class="mt-4 text-center w-full border-2 bg-gray-100"
+        data-cy="changeOptionsButton"
+        @click="addOption"
+      >
+        Add option with illegal value
+      </button>
+    </div>
     <div v-if="testExposedFunctions">
       <button
         class="mt-4 text-center w-full border-2 bg-gray-100"
@@ -274,7 +283,7 @@ export default defineComponent({
           value = [value]
           selected.value = value
         }
-        else if (setValue.value && !multiple.value) {
+        else if (!multiple.value) {
           selected.value = value
         }
         else if (!setValue.value && Array.isArray(selected.value)) {
@@ -291,7 +300,7 @@ export default defineComponent({
           selected.value = [value, secondValue]
         }
 
-        else if (setValue.value && !multiple.value) {
+        else if (!multiple.value) {
           selected.value = value
         }
 
@@ -301,7 +310,7 @@ export default defineComponent({
       }
     }
 
-    const dynamicSelectOptions = ref<Option[]>([
+    const dynamicSelectOptions = ref<Array<Option | unknown>>([
       {value: {abc: 'xyz', test: {xyz: 3}}, label: 'This'},
       {value: 2, label: 'is'},
       {value: 'haha', label: 'a'},
@@ -315,6 +324,11 @@ export default defineComponent({
       ]
     }
 
+    function addOption() {
+      const option = {value: {this: 'Hallo', is: 1234, a: {Test: 'okayyy, let\'s go'}}, label: 'jooooooo'}
+      dynamicSelectOptions.value.push(option)
+    }
+
     const multiselect = ref<typeof Multiselect | null>(null)
 
     function testFocus() {
@@ -333,6 +347,7 @@ export default defineComponent({
       pushIllegalValue,
       dynamicSelectOptions,
       changeSelectOptions,
+      addOption,
       testFocus,
       testBlur,
       multiselect,

src/utils/index.ts

@@ -6,4 +6,3 @@ export {default as useDropdown} from './useDropdown'
 export {default as useMultiselect} from './useMultiselect'
 export {default as useOptions} from './useOptions'
 export {default as useSearch} from './useSearch'
-export {default as useValue} from './useValue'

src/utils/useMultiselect.ts

@@ -5,7 +5,6 @@ export default function useMultiselect(searchable: Ref<boolean>,
   disabled: Ref<boolean>,
   multiple: Ref<boolean>,
   context: SetupContext,
-  selectedValues: Ref,
   openDropdown: () => void,
   closeDropdown: () => void,
   clearSearch: () => void,
@@ -36,17 +35,6 @@ export default function useMultiselect(searchable: Ref<boolean>,
     }
   }
 
-  function clear() {
-    if (multiple.value)
-      selectedValues.value.length = 0
-    else
-      selectedValues.value = null
-
-    deactivate()
-    context.emit('update:modelValue', selectedValues.value)
-    context.emit('clear')
-  }
-
   function handleFocus() {
     input.value?.focus()
   }
@@ -80,7 +68,6 @@ export default function useMultiselect(searchable: Ref<boolean>,
     tabindex,
     activate,
     deactivate,
-    clear,
     handleMousedown,
     handleFocus,
   }