fix: bugs caused by branch fix (#68)

Co-authored-by: Merlin Flach <merlin.flach@singular-it.de>

README.md

@@ -14,7 +14,7 @@
 ## Installation
 
 ```bash
-npm install @singularit/multiselect@beta
+npm install @singularit/multiselect
 ```
 
 

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,17 +401,15 @@ 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(
       searchable,
       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,

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/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))

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,
   }

src/utils/useScroll.ts

@@ -1,22 +1,25 @@
 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,
 ) {
   const hasMore = computed(() => {
     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,

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,
   }
 }