From 8bdb74be1c25d5f30bccb83717dc8cf8e52ac4b3 Mon Sep 17 00:00:00 2001
From: Moerlin1337 <105291378+Moerlin1337@users.noreply.github.com>
Date: Wed, 7 Dec 2022 16:11:15 +0100
Subject: [PATCH] fix: bugs caused by branch fix (#68)

Co-authored-by: Merlin Flach <merlin.flach@singular-it.de>
---
 README.md                       |  2 +-
 src/Multiselect.vue             | 27 +++++----------------------
 src/tests/MultiselectTester.vue | 21 ++++++++++++++++++---
 src/utils/index.ts              |  1 -
 src/utils/useClasses.ts         |  4 ++--
 src/utils/useMultiselect.ts     | 12 ------------
 src/utils/useScroll.ts          |  9 ++++++---
 src/utils/useSearch.ts          | 23 +++++++++++++----------
 src/utils/useValue.ts           | 24 ------------------------
 9 files changed, 45 insertions(+), 78 deletions(-)
 delete mode 100644 src/utils/useValue.ts

diff --git a/README.md b/README.md
index 061ad83..7cff83b 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@
 ## Installation
 
 ```bash
-npm install @singularit/multiselect@beta
+npm install @singularit/multiselect
 ```
 
 
diff --git a/src/Multiselect.vue b/src/Multiselect.vue
index 521bdfb..acd1c23 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'
@@ -404,9 +401,8 @@ 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)
     const search = useSearch(context)
     const multiselect = useMultiselect(
@@ -414,7 +410,6 @@ export default defineComponent({
       disabled,
       multiple,
       context,
-      value.selectedValues,
       dropdown.openDropdown,
       dropdown.closeDropdown,
       search.clearSearch,
@@ -431,14 +426,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 +448,7 @@ 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()
-      }
-    })
-
     return {
-      ...value,
       ...dropdown,
       ...search,
       ...options,
diff --git a/src/tests/MultiselectTester.vue b/src/tests/MultiselectTester.vue
index c3c4000..b75cd2c 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/useClasses.ts b/src/utils/useClasses.ts
index f5e913e..262e10f 100644
--- a/src/utils/useClasses.ts
+++ b/src/utils/useClasses.ts
@@ -9,7 +9,7 @@ export default function useClasses(disabled: Ref<boolean>,
   classes: Ref<Classes>,
   selectedOptions: Ref<Array<Option | unknown>>,
   dropdownOpen: Ref<boolean>,
-  isSelected: (option: Option | unknown, selectedOptions: Array<Option | unknown>) => boolean,
+  isSelected: (option: Option | unknown) => boolean,
   isActive: Ref<boolean>) {
   const styleClasses = {
     ...defaultTheme,
@@ -40,7 +40,7 @@ export default function useClasses(disabled: Ref<boolean>,
       noResults: styleClasses.noResults,
       option: (o: Option | unknown) => {
         let option = styleClasses.option
-        if (isSelected(o, selectedOptions.value))
+        if (isSelected(o))
           option = styleClasses.optionSelected
 
         if (optionDisabled.value(o, selectedOptions.value))
diff --git a/src/utils/useMultiselect.ts b/src/utils/useMultiselect.ts
index 08fc3cc..a1f8d68 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,16 +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 +69,6 @@ export default function useMultiselect(searchable: Ref<boolean>,
     tabindex,
     activate,
     deactivate,
-    clear,
     handleMousedown,
     handleFocus,
   }
diff --git a/src/utils/useScroll.ts b/src/utils/useScroll.ts
index 14f4e18..f31f996 100644
--- a/src/utils/useScroll.ts
+++ b/src/utils/useScroll.ts
@@ -1,10 +1,12 @@
 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>,
   maxOptions: Ref<number>,
+  loadingOptions: Ref<boolean>,
   selectOptions: Ref<Array<Option | unknown>>,
   context: SetupContext,
 ) {
@@ -12,11 +14,12 @@ 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)
+    if (scrollTop + offsetHeight >= scrollHeight && hasMore.value && !loadingOptions.value)
       context.emit('loadMore')
-  }
+  }, 50)
+
 
   return {
     hasMore,
diff --git a/src/utils/useSearch.ts b/src/utils/useSearch.ts
index 4e70224..c3eeebd 100644
--- a/src/utils/useSearch.ts
+++ b/src/utils/useSearch.ts
@@ -1,26 +1,29 @@
 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('')
+  const search = computed<string>({
+    get() {
+      return searchString.value
+    },
+    set(val) {
+      searchString.value = val
+      context.emit('search-change', val)
+    },
+  })
 
   function clearSearch() {
-    search.value = ''
+    if (search.value)
+      search.value = ''
   }
 
-  function handleInput(e: InputEvent) {
-    search.value = (e.target as HTMLInputElement).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,
-  }
-}