From 6f923bd327264eae043c28ad8c5c5d8faa32c0da Mon Sep 17 00:00:00 2001
From: Merlin Flach <merlin.flach@singular-it.de>
Date: Mon, 7 Nov 2022 16:19:29 +0100
Subject: [PATCH 1/8] fix: loadMore is only emitted once

---
 src/utils/useScroll.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/utils/useScroll.ts b/src/utils/useScroll.ts
index 14f4e18..99f8a9a 100644
--- a/src/utils/useScroll.ts
+++ b/src/utils/useScroll.ts
@@ -1,6 +1,7 @@
 import type {Ref, SetupContext} from 'vue'
 import {computed} from 'vue'
 import type {Option} from '../types'
+import _ from "lodash";
 
 export default function useScroll(
   infinite: Ref<boolean>,
@@ -12,11 +13,11 @@ export default function useScroll(
     return selectOptions.value.length < maxOptions.value
   })
 
-  function handleScroll(e: Event) {
+  const handleScroll = _.debounce((e: Event) => {
     const {scrollTop, offsetHeight, scrollHeight} = e.target as HTMLDivElement
     if (scrollTop + offsetHeight >= scrollHeight && hasMore.value)
       context.emit('loadMore')
-  }
+  }, 50)
 
   return {
     hasMore,

From ecde688bee275c967b23604414369e707018551a Mon Sep 17 00:00:00 2001
From: Merlin Flach <merlin.flach@singular-it.de>
Date: Mon, 7 Nov 2022 16:20:34 +0100
Subject: [PATCH 2/8] fix: multiselect isn't cleared if options are removed in
 infinite mode

---
 src/Multiselect.vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/Multiselect.vue b/src/Multiselect.vue
index 2d235ec..d3606b0 100644
--- a/src/Multiselect.vue
+++ b/src/Multiselect.vue
@@ -453,14 +453,16 @@ export default defineComponent({
     )
 
     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)
+      if (!props.infinite) {
+        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()
         }
-      }
-      else {
-        multiselect.clear()
       }
     })
 

From c199502c3ce7c4befc7c75ebbdd34fd0e3512966 Mon Sep 17 00:00:00 2001
From: Merlin Flach <merlin.flach@singular-it.de>
Date: Mon, 7 Nov 2022 17:25:44 +0100
Subject: [PATCH 3/8] fix: don't emit 'loadMore' if options are currently
 loading

---
 src/Multiselect.vue    | 14 ++++++++------
 src/utils/useScroll.ts |  3 ++-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/Multiselect.vue b/src/Multiselect.vue
index d3606b0..7617850 100644
--- a/src/Multiselect.vue
+++ b/src/Multiselect.vue
@@ -404,7 +404,7 @@ export default defineComponent({
   setup(props, context: SetupContext) {
     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)
@@ -439,6 +439,7 @@ export default defineComponent({
     const scroll = useScroll(
       infinite,
       maxOptions,
+      loadingOptions,
       selectOptions,
       context,
     )
@@ -452,19 +453,20 @@ export default defineComponent({
       multiselect.isActive,
     )
 
-    watch(() => props.selectOptions, (newOptions, oldOptions) => {
-      if (!props.infinite) {
+    if (!props.infinite) {
+      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))
+            if (!_.some(newOptions, option as Option) && options.isSelected(option, options.selectedOptions.value))
               options.deselect(option)
           }
         }
         else {
           multiselect.clear()
         }
-      }
-    })
+      })
+    }
+
 
     return {
       ...value,
diff --git a/src/utils/useScroll.ts b/src/utils/useScroll.ts
index 99f8a9a..55ffd6a 100644
--- a/src/utils/useScroll.ts
+++ b/src/utils/useScroll.ts
@@ -6,6 +6,7 @@ import _ from "lodash";
 export default function useScroll(
   infinite: Ref<boolean>,
   maxOptions: Ref<number>,
+  loadingOptions: Ref<boolean>,
   selectOptions: Ref<Array<Option | unknown>>,
   context: SetupContext,
 ) {
@@ -15,7 +16,7 @@ export default function useScroll(
 
   const handleScroll = _.debounce((e: Event) => {
     const {scrollTop, offsetHeight, scrollHeight} = e.target as HTMLDivElement
-    if (scrollTop + offsetHeight >= scrollHeight && hasMore.value)
+    if (scrollTop + offsetHeight >= scrollHeight && hasMore.value && !loadingOptions.value)
       context.emit('loadMore')
   }, 50)
 

From 318957cc155b1a20994c29588d811d5f5f0ebabf Mon Sep 17 00:00:00 2001
From: Merlin Flach <merlin.flach@singular-it.de>
Date: Tue, 15 Nov 2022 15:18:44 +0100
Subject: [PATCH 4/8] feat: performance rework

---
 src/Multiselect.vue                      |  77 ++++++---
 src/stories/MultiselectTester.stories.js |   2 +-
 src/tests/MultiselectTester.vue          |  21 ++-
 src/utils/index.ts                       |   1 -
 src/utils/useMultiselect.ts              |  13 --
 src/utils/useOptions.ts                  | 208 +++++++++++++++--------
 src/utils/useSearch.ts                   |  26 +--
 src/utils/useValue.ts                    |  24 ---
 8 files changed, 220 insertions(+), 152 deletions(-)
 delete mode 100644 src/utils/useValue.ts

diff --git a/src/Multiselect.vue b/src/Multiselect.vue
index 7617850..649a01b 100644
--- a/src/Multiselect.vue
+++ b/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,11 +399,48 @@ 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, loadingOptions,
     } = toRefs(props)
-    const value = useValue(multiple, modelValue)
     const dropdown = useDropdown(context)
     const search = useSearch(context)
     const multiselect = useMultiselect(
@@ -414,7 +448,6 @@ export default defineComponent({
       disabled,
       multiple,
       context,
-      value.selectedValues,
       dropdown.openDropdown,
       dropdown.closeDropdown,
       search.clearSearch,
@@ -431,8 +464,8 @@ export default defineComponent({
       optionLabel,
       optionDisabled,
       optionSearchValue,
+      infinite,
       context,
-      value.selectedValues,
       multiselect.deactivate,
       search.search,
     )
@@ -453,23 +486,21 @@ export default defineComponent({
       multiselect.isActive,
     )
 
-    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()
-        }
-      })
-    }
-
+    // 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,
diff --git a/src/stories/MultiselectTester.stories.js b/src/stories/MultiselectTester.stories.js
index f12da2e..0a0014d 100644
--- a/src/stories/MultiselectTester.stories.js
+++ b/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,
 }
diff --git a/src/tests/MultiselectTester.vue b/src/tests/MultiselectTester.vue
index c3c4000..3e6a55a 100644
--- a/src/tests/MultiselectTester.vue
+++ b/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,
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 7befe09..72724d0 100644
--- a/src/utils/index.ts
+++ b/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'
diff --git a/src/utils/useMultiselect.ts b/src/utils/useMultiselect.ts
index 08fc3cc..6a9b3cc 100644
--- a/src/utils/useMultiselect.ts
+++ b/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,
   }
diff --git a/src/utils/useOptions.ts b/src/utils/useOptions.ts
index 02bc15b..2c63145 100644
--- a/src/utils/useOptions.ts
+++ b/src/utils/useOptions.ts
@@ -1,6 +1,6 @@
 import * as _ from 'lodash'
 import type {Ref, SetupContext} from 'vue'
-import {computed, watch} from 'vue'
+import {computed, ref, watch} from 'vue'
 import type {Option} from '../types'
 
 export default function useOptions(multiple: Ref<boolean>,
@@ -12,75 +12,111 @@ export default function useOptions(multiple: Ref<boolean>,
   optionLabel: Ref<(option: Option | unknown, selectedOptions: Array<Option | unknown>) => string>,
   optionDisabled: Ref<(option: Option | unknown, selectedOptions: Array<Option | unknown>) => boolean>,
   optionSearchValue: Ref<(option: Option | unknown, selectedOptions: Array<Option | unknown>) => string>,
+  infinite: Ref<boolean>,
   context: SetupContext,
-  selectedValues: Ref,
   deactivate: () => void,
   search: Ref<string>) {
-  function isSelected(option: Option | unknown, selectedOptions: Array<Option | unknown>) {
+  const selectedOptionsRef = ref<Array<Option | unknown>>([])
+
+  const optionMap = computed<Map<string, Option | unknown>>(() => {
+    const map = new Map<string, Option | unknown>()
+    selectedOptionsRef.value = _.uniq(selectedOptionsRef.value)
+    selectOptions.value.forEach((option: Option | unknown) => {
+      const valueString = JSON.stringify(optionValue.value(option, selectedOptionsRef.value))
+      map.set(valueString, option)
+    })
+    return map
+  })
+
+  function isSelected(option: Option | unknown) {
+    return selectedOptionsRef.value.some((selectedOption) => {
+      return _.isEqual(optionValue.value(selectedOption, selectedOptionsRef.value), optionValue.value(option, selectedOptionsRef.value))
+    })
+  }
+
+  function updateModelValue(options: Array<Option | unknown>) {
+    let value
     if (multiple.value) {
-      let find = null
-      if (selectedValues.value && selectedValues.value.length > 0) {
-        if (selectedValues.value.includes(optionValue.value(option, selectedOptions)))
-          return true
-
-        // enable pushing values into modelValue correctly
-        find = selectedValues.value.find((value: unknown, index: number) => {
-          if (_.isEqual(value, optionValue.value(option, selectedOptions))) {
-            // update value if option was pushed externally, because identical objects aren't equal
-            if (selectedValues.value[index] !== optionValue.value(option, selectedOptions))
-              selectedValues.value.splice(index, 1, optionValue.value(option, selectedOptions))
-            return true
-          }
-          return false
-        })
-      }
-      return !!find
+      value = []
+      options.forEach((option) => {
+        value.push(optionValue.value(option, options))
+      })
     }
     else {
-      if ((selectedValues.value || selectedValues.value === 0 || selectedValues.value === '')
-          && _.isEqual(selectedValues.value, optionValue.value(option, selectedOptions))) {
-        if (selectedValues.value !== optionValue.value(option, selectedOptions))
-          selectedValues.value = optionValue.value(option, selectedOptions)
+      value = null
+      if (options.length > 0)
+        value = optionValue.value(options[0], options)
+    }
+    context.emit('update:modelValue', value)
+  }
 
-        return true
+  const selectedOptions = computed<Array<Option | unknown>>({
+    get() {
+      selectedOptionsRef.value = _.uniq(selectedOptionsRef.value)
+      return selectedOptionsRef.value
+    },
+    set(values) {
+      // :thisisfine
+      let correctValues: Array<unknown> | unknown
+      const correctOptions: Array<Option | unknown> = []
+      if (multiple.value && _.isArray(values)) {
+        correctValues = []
+        values.forEach((value) => {
+          const option = optionMap.value.get(JSON.stringify(value))
+          if (option) {
+            (correctValues as Array<unknown>).push(value)
+            correctOptions.push(option)
+            if (!isSelected(option)) {
+              selectedOptionsRef.value.push(option)
+              context.emit('select', option)
+            }
+            else if (infinite) {
+              selectedOptionsRef.value.push(option)
+            }
+          }
+          else if (infinite.value) {
+            (correctValues as Array<unknown>).push(value)
+            correctOptions.push({value})
+            if (!isSelected({value}))
+              selectedOptionsRef.value.push({value})
+          }
+        })
+        correctValues = _.uniq(correctValues as Array<unknown>)
       }
       else {
-        return false
+        correctValues = null
+        const value = values[0]
+        const option = optionMap.value.get(JSON.stringify(value))
+        if (option) {
+          correctValues = value
+          correctOptions.push(option)
+          if (!isSelected(option)) {
+            selectedOptionsRef.value = [option]
+            context.emit('select', option)
+          }
+          else if (infinite.value) {
+            selectedOptionsRef.value = [option]
+          }
+        }
+        else if (infinite.value) {
+          correctValues = value
+          correctOptions.push({value})
+          if (!isSelected({value}))
+            selectedOptionsRef.value = [{value}]
+        }
       }
-    }
-  }
-
-  const selectedOptions = computed<Array<Option | unknown>>(() => {
-    const selected = []
-    for (const option of selectOptions.value) {
-      if (isSelected(option, selectedOptions.value))
-        selected.push(option)
-    }
-
-    // prevents from pushing illegal stuff in single mode
-    if (!multiple.value && selectedValues.value !== null && selected.length === 0) {
-      selectedValues.value = null
-      context.emit('update:modelValue', selectedValues.value)
-    }
-    return selected
-  })
-
-  // for correctly setting modelValue in multiple mode
-  watch(() => selectedOptions.value, (selected) => {
-    if (multiple.value && Array.isArray(selectedValues.value) && selectedValues.value.length > selected.length) {
-      const correctValues: Array<unknown> = []
-      selected.forEach((value) => {
-        const selectedOptionValue = optionValue.value(value, [])
-        if (_.includes(selectedValues.value, selectedOptionValue))
-          correctValues.push(selectedOptionValue)
-      })
-      selectedValues.value = correctValues
-      context.emit('update:modelValue', selectedValues.value)
-    }
+      selectedOptionsRef.value = _.uniq(selectedOptionsRef.value)
+
+      if (!_.isEqual(selectedOptionsRef.value, correctOptions))
+      // TODO maybe emit deselected values too ?
+        selectedOptionsRef.value = correctOptions
+      if (!_.isEqual(values, correctValues))
+        context.emit('update:modelValue', correctValues)
+    },
   })
 
   const shownOptions = computed<Array<Option | unknown>>(() => {
-    if (search && search.value) {
+    if (!infinite.value && search && search.value) {
       return (selectOptions.value as Option[]).filter((option: Option | unknown) => {
         return optionSearchValue.value(option, selectedOptions.value).toLowerCase().includes(search.value.toLowerCase())
       })
@@ -92,42 +128,61 @@ export default function useOptions(multiple: Ref<boolean>,
 
   const noResults = computed(() => search && search.value && shownOptions.value && shownOptions.value.length === 0)
 
-  watch(modelValue.value, () => {
-    // prevents from pushing things that aren't options and pushing the same option multiple times in multiple mode
-    if (multiple.value && (selectedOptions.value as Array<Option | unknown>).length < selectedValues.value.length)
-      selectedValues.value.pop()
+  watch(() => modelValue.value, (value) => {
+    selectedOptions.value = _.isArray(value) ? value : [value]
+  }, {deep: true})
+
+  watch(optionMap, (newMap, oldMap) => {
+    if (!_.isEqual(newMap, oldMap))
+      selectedOptions.value = _.isArray(modelValue.value) ? modelValue.value : [modelValue.value]
   })
 
   function select(option: Option | unknown) {
-    multiple.value ? selectedValues.value.push(optionValue.value(option, selectedOptions.value)) : selectedValues.value = optionValue.value(option, selectedOptions.value)
-    context.emit('select', option)
-    context.emit('update:modelValue', selectedValues.value)
-    if (closeOnSelect.value)
-      deactivate()
+    if (!isSelected(option)) {
+      multiple.value ? selectedOptionsRef.value.push(option) : selectedOptionsRef.value = [option]
+      context.emit('select', option)
+      updateModelValue(selectedOptions.value)
+      if (closeOnSelect.value)
+        deactivate()
+    }
   }
 
   function deselect(option: Option | unknown) {
-    if (multiple.value) {
-      const index = selectedValues.value.indexOf(optionValue.value(option, selectedOptions.value))
-      selectedValues.value.splice(index, 1)
-    }
-    else {
-      selectedValues.value = null
+    if (isSelected(option)) {
+      if (multiple.value) {
+        selectedOptionsRef.value = selectedOptionsRef.value.filter((selectedOption) => {
+          return !_.isEqual(selectedOption, option)
+        })
+      }
+      else {
+        selectedOptionsRef.value.length = 0
+      }
+      context.emit('deselect', option)
+      updateModelValue(selectedOptions.value)
     }
-    context.emit('deselect', option)
-    context.emit('update:modelValue', selectedValues.value)
   }
 
   function handleOptionClick(option: Option | unknown) {
     if (optionDisabled.value(option, selectedOptions.value))
       return
 
-    if (isSelected(option, selectedOptions.value))
+    if (isSelected(option))
       deselect(option)
     else
       select(option)
   }
 
+  const noSelection = computed(() => {
+    return selectedOptions.value.length === 0
+  })
+
+  function clear() {
+    selectedOptionsRef.value.length = 0
+    deactivate()
+    context.emit('clear')
+    updateModelValue(selectedOptions.value)
+  }
+
   const valueDisplayText = computed(() => {
     if (multiple.value) {
       if (displaySelectedValues && displaySelectedValues.value) {
@@ -150,10 +205,13 @@ export default function useOptions(multiple: Ref<boolean>,
     noOptions,
     shownOptions,
     noResults,
+    selectedOptionsRef,
     selectedOptions,
     isSelected,
     handleOptionClick,
     deselect,
     valueDisplayText,
+    noSelection,
+    clear,
   }
 }
diff --git a/src/utils/useSearch.ts b/src/utils/useSearch.ts
index 4e70224..460c5bc 100644
--- a/src/utils/useSearch.ts
+++ b/src/utils/useSearch.ts
@@ -1,26 +1,28 @@
 import type {SetupContext} from 'vue'
-import {ref, watch} from 'vue'
+import {computed, ref} from 'vue'
 
 export default function useSearch(context: SetupContext) {
   const input = ref<HTMLInputElement | null>(null)
-  const search = ref('')
+  const searchString = ref('')
 
-  function clearSearch() {
-    search.value = ''
-  }
+  const search = computed<string>({
+    get() {
+      return searchString.value
+    },
+    set(val) {
+      searchString.value = val
+      context.emit('search-change', val)
+    },
+  })
 
-  function handleInput(e: InputEvent) {
-    search.value = (e.target as HTMLInputElement).value
+  function clearSearch() {
+    if (search.value)
+      search.value = ''
   }
 
-  watch(search, (val) => {
-    context.emit('search-change', val)
-  })
-
   return {
     search,
     clearSearch,
-    handleInput,
     input,
   }
 }
diff --git a/src/utils/useValue.ts b/src/utils/useValue.ts
deleted file mode 100644
index 5725d5c..0000000
--- a/src/utils/useValue.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import type {Ref} from 'vue'
-import {computed, ref, watch} from 'vue'
-
-export default function useValue(multiple: Ref<boolean>, modelValue: Ref) {
-  const selectedValues = ref(modelValue.value)
-
-  // for externally pushing things -> updates selectedValues
-  watch(() => modelValue.value, (newValue) => {
-    if (newValue !== selectedValues.value)
-      selectedValues.value = modelValue.value
-  })
-
-  const noSelection = computed(() => {
-    if (multiple.value)
-      return !(selectedValues.value && selectedValues.value.length > 0)
-    else
-      return !(selectedValues.value || selectedValues.value === 0 || selectedValues.value === '')
-  })
-
-  return {
-    selectedValues,
-    noSelection,
-  }
-}

From cf8712360bcb3e1cfeaaae4da913a1f8077596ad Mon Sep 17 00:00:00 2001
From: Merlin Flach <merlin.flach@singular-it.de>
Date: Tue, 15 Nov 2022 17:08:38 +0100
Subject: [PATCH 5/8] fix: if-condition

---
 src/utils/useOptions.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/useOptions.ts b/src/utils/useOptions.ts
index 2c63145..4b9b368 100644
--- a/src/utils/useOptions.ts
+++ b/src/utils/useOptions.ts
@@ -70,7 +70,7 @@ export default function useOptions(multiple: Ref<boolean>,
               selectedOptionsRef.value.push(option)
               context.emit('select', option)
             }
-            else if (infinite) {
+            else if (infinite.value) {
               selectedOptionsRef.value.push(option)
             }
           }

From 94d3db29bd652e8ca656a2b2011ef692d066fb66 Mon Sep 17 00:00:00 2001
From: Merlin Flach <merlin.flach@singular-it.de>
Date: Tue, 15 Nov 2022 17:29:49 +0100
Subject: [PATCH 6/8] fix: remember selected options in infinite mode

---
 src/utils/useOptions.ts | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/utils/useOptions.ts b/src/utils/useOptions.ts
index 4b9b368..f91ec44 100644
--- a/src/utils/useOptions.ts
+++ b/src/utils/useOptions.ts
@@ -70,15 +70,24 @@ export default function useOptions(multiple: Ref<boolean>,
               selectedOptionsRef.value.push(option)
               context.emit('select', option)
             }
+            // overwrite option without label
             else if (infinite.value) {
               selectedOptionsRef.value.push(option)
             }
           }
           else if (infinite.value) {
             (correctValues as Array<unknown>).push(value)
-            correctOptions.push({value})
-            if (!isSelected({value}))
+            if (!isSelected({value})) {
+              correctOptions.push({value})
               selectedOptionsRef.value.push({value})
+            }
+            // keeps remembered Option
+            else {
+              const rememberedOption = selectedOptionsRef.value.find((selectedOption) => {
+                return _.isEqual(value, optionValue.value(selectedOption, selectedOptionsRef.value))
+              })
+              correctOptions.push(rememberedOption)
+            }
           }
         })
         correctValues = _.uniq(correctValues as Array<unknown>)
@@ -100,9 +109,16 @@ export default function useOptions(multiple: Ref<boolean>,
         }
         else if (infinite.value) {
           correctValues = value
-          correctOptions.push({value})
-          if (!isSelected({value}))
+          if (!isSelected({value})) {
+            correctOptions.push({value})
             selectedOptionsRef.value = [{value}]
+          }
+          else {
+            const rememberedOption = selectedOptionsRef.value.find((selectedOption) => {
+              return _.isEqual(value, optionValue.value(selectedOption, selectedOptionsRef.value))
+            })
+            correctOptions.push(rememberedOption)
+          }
         }
       }
       selectedOptionsRef.value = _.uniq(selectedOptionsRef.value)

From 6004fde1b86296dc1de7db493c1efbce2c1099b7 Mon Sep 17 00:00:00 2001
From: Merlin Flach <merlin.flach@singular-it.de>
Date: Tue, 22 Nov 2022 15:17:52 +0100
Subject: [PATCH 7/8] chore: remove duplicate code

---
 src/utils/useOptions.ts | 58 +++++++++--------------------------------
 1 file changed, 13 insertions(+), 45 deletions(-)

diff --git a/src/utils/useOptions.ts b/src/utils/useOptions.ts
index f91ec44..14f9704 100644
--- a/src/utils/useOptions.ts
+++ b/src/utils/useOptions.ts
@@ -56,63 +56,30 @@ export default function useOptions(multiple: Ref<boolean>,
       return selectedOptionsRef.value
     },
     set(values) {
-      // :thisisfine
-      let correctValues: Array<unknown> | unknown
+      let correctValues: Array<unknown> = []
       const correctOptions: Array<Option | unknown> = []
-      if (multiple.value && _.isArray(values)) {
-        correctValues = []
-        values.forEach((value) => {
-          const option = optionMap.value.get(JSON.stringify(value))
-          if (option) {
-            (correctValues as Array<unknown>).push(value)
-            correctOptions.push(option)
-            if (!isSelected(option)) {
-              selectedOptionsRef.value.push(option)
-              context.emit('select', option)
-            }
-            // overwrite option without label
-            else if (infinite.value) {
-              selectedOptionsRef.value.push(option)
-            }
-          }
-          else if (infinite.value) {
-            (correctValues as Array<unknown>).push(value)
-            if (!isSelected({value})) {
-              correctOptions.push({value})
-              selectedOptionsRef.value.push({value})
-            }
-            // keeps remembered Option
-            else {
-              const rememberedOption = selectedOptionsRef.value.find((selectedOption) => {
-                return _.isEqual(value, optionValue.value(selectedOption, selectedOptionsRef.value))
-              })
-              correctOptions.push(rememberedOption)
-            }
-          }
-        })
-        correctValues = _.uniq(correctValues as Array<unknown>)
-      }
-      else {
-        correctValues = null
-        const value = values[0]
+      values.forEach((value) => {
         const option = optionMap.value.get(JSON.stringify(value))
         if (option) {
-          correctValues = value
+          correctValues.push(value)
           correctOptions.push(option)
           if (!isSelected(option)) {
-            selectedOptionsRef.value = [option]
+            selectedOptionsRef.value.push(option)
             context.emit('select', option)
           }
+          // overwrite option without label
           else if (infinite.value) {
-            selectedOptionsRef.value = [option]
+            selectedOptionsRef.value.push(option)
           }
         }
         else if (infinite.value) {
-          correctValues = value
+          correctValues.push(value)
           if (!isSelected({value})) {
             correctOptions.push({value})
-            selectedOptionsRef.value = [{value}]
+            selectedOptionsRef.value.push({value})
+            context.emit('select', {value})
           }
+          // keeps remembered Option
           else {
             const rememberedOption = selectedOptionsRef.value.find((selectedOption) => {
               return _.isEqual(value, optionValue.value(selectedOption, selectedOptionsRef.value))
@@ -120,14 +87,15 @@ export default function useOptions(multiple: Ref<boolean>,
             correctOptions.push(rememberedOption)
           }
         }
-      }
+      })
+      correctValues = _.uniq(correctValues)
       selectedOptionsRef.value = _.uniq(selectedOptionsRef.value)
 
       if (!_.isEqual(selectedOptionsRef.value, correctOptions))
       // TODO maybe emit deselected values too ?
         selectedOptionsRef.value = correctOptions
       if (!_.isEqual(values, correctValues))
-        context.emit('update:modelValue', correctValues)
+        context.emit('update:modelValue', multiple.value ? correctValues : correctValues[0])
     },
   })
 

From 2d23852211819e74a01b30c87c68e1a9c3279beb Mon Sep 17 00:00:00 2001
From: Merlin Flach <merlin.flach@singular-it.de>
Date: Tue, 22 Nov 2022 15:59:22 +0100
Subject: [PATCH 8/8] chore: remove unnecessary comments

---
 src/Multiselect.vue | 52 ---------------------------------------------
 1 file changed, 52 deletions(-)

diff --git a/src/Multiselect.vue b/src/Multiselect.vue
index 649a01b..9dab941 100644
--- a/src/Multiselect.vue
+++ b/src/Multiselect.vue
@@ -399,44 +399,6 @@ 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, loadingOptions,
@@ -486,20 +448,6 @@ export default defineComponent({
       multiselect.isActive,
     )
 
-    // 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 {
       ...dropdown,
       ...search,