From 75c9506662d07bd660e59553dcfb3d7e9f358023 Mon Sep 17 00:00:00 2001
From: Merlin Flach <merlin.flach@singular-it.de>
Date: Wed, 23 Nov 2022 15:40:15 +0100
Subject: [PATCH 1/6] fix: avoid reactive variables to trigger themselves

---
 src/Multiselect.vue     | 10 +++++-----
 src/utils/useOptions.ts | 37 ++++++++++++++++++++++---------------
 2 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/Multiselect.vue b/src/Multiselect.vue
index 9dab941..cdff281 100644
--- a/src/Multiselect.vue
+++ b/src/Multiselect.vue
@@ -67,7 +67,7 @@
       >
         <li
           v-for="(option) in shownOptions"
-          :key="optionValue(option,selectedOptions)"
+          :key="optionValue(option)"
           :class="classList.option(option)"
           data-cy="option"
           @click="handleOptionClick(option)"
@@ -77,7 +77,7 @@
             :option="option"
             name="option-label"
           >
-            <span data-cy="option-label">{{ optionLabel(option,selectedOptions) }}</span>
+            <span data-cy="option-label">{{ optionLabel(option) }}</span>
           </slot>
         </li>
       </ul>
@@ -189,7 +189,7 @@ export default defineComponent({
      * By default, it returns the value attribute of the passed option.
      */
     optionValue: {
-      type: Function as PropType<((option: Option | unknown, selectedOptions: Array<Option | unknown>) => unknown)>,
+      type: Function as PropType<(option: Option | unknown) => unknown>,
       required: false,
       default: (option: Option | unknown) => {
         if (option)
@@ -220,7 +220,7 @@ export default defineComponent({
      * By default, it returns the label attribute of the passed option.
      */
     optionLabel: {
-      type: Function as PropType<((option: Option | unknown, selectedOptions: Array<Option | unknown>) => string)>,
+      type: Function as PropType<((option: Option | unknown) => string)>,
       required: false,
       default: (option: Option | unknown) => {
         if (option)
@@ -299,7 +299,7 @@ export default defineComponent({
      * By default, it returns the label of the passed option.
      */
     optionSearchValue: {
-      type: Function as PropType<((option: Option | unknown, selectedOptions: Array<Option | unknown>) => string)>,
+      type: Function as PropType<((option: Option | unknown) => string)>,
       required: false,
       default: (option: Option | unknown) => {
         if (option)
diff --git a/src/utils/useOptions.ts b/src/utils/useOptions.ts
index 14f9704..b54e5c7 100644
--- a/src/utils/useOptions.ts
+++ b/src/utils/useOptions.ts
@@ -8,10 +8,10 @@ export default function useOptions(multiple: Ref<boolean>,
   closeOnSelect: Ref<boolean>,
   selectOptions: Ref<Array<Option | unknown>>,
   displaySelectedValues: Ref<((options: Array<Option | unknown>) => string) | string | undefined>,
-  optionValue: Ref<(option: Option | unknown, selectedOptions: Array<Option | unknown>) => unknown>,
-  optionLabel: Ref<(option: Option | unknown, selectedOptions: Array<Option | unknown>) => string>,
+  optionValue: Ref<(option: Option | unknown) => unknown>,
+  optionLabel: Ref<(option: Option | unknown) => string>,
   optionDisabled: Ref<(option: Option | unknown, selectedOptions: Array<Option | unknown>) => boolean>,
-  optionSearchValue: Ref<(option: Option | unknown, selectedOptions: Array<Option | unknown>) => string>,
+  optionSearchValue: Ref<(option: Option | unknown) => string>,
   infinite: Ref<boolean>,
   context: SetupContext,
   deactivate: () => void,
@@ -20,9 +20,8 @@ export default function useOptions(multiple: Ref<boolean>,
 
   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))
+      const valueString = JSON.stringify(optionValue.value(option))
       map.set(valueString, option)
     })
     return map
@@ -30,29 +29,34 @@ export default function useOptions(multiple: Ref<boolean>,
 
   function isSelected(option: Option | unknown) {
     return selectedOptionsRef.value.some((selectedOption) => {
-      return _.isEqual(optionValue.value(selectedOption, selectedOptionsRef.value), optionValue.value(option, selectedOptionsRef.value))
+      return _.isEqual(optionValue.value(selectedOption), optionValue.value(option))
     })
   }
 
+  const tempValue = ref<Array<unknown> | unknown>()
+
   function updateModelValue(options: Array<Option | unknown>) {
     let value
     if (multiple.value) {
-      value = []
+      value = [] as Array<unknown>
       options.forEach((option) => {
-        value.push(optionValue.value(option, options))
+        value.push(optionValue.value(option))
       })
+      tempValue.value = [...value]
     }
     else {
       value = null
       if (options.length > 0)
-        value = optionValue.value(options[0], options)
+        value = optionValue.value(options[0])
+      tempValue.value = value
     }
     context.emit('update:modelValue', value)
   }
 
   const selectedOptions = computed<Array<Option | unknown>>({
     get() {
-      selectedOptionsRef.value = _.uniq(selectedOptionsRef.value)
+      if (selectedOptionsRef.value.length !== _.uniq(selectedOptionsRef.value).length)
+        selectedOptionsRef.value = _.uniq(selectedOptionsRef.value)
       return selectedOptionsRef.value
     },
     set(values) {
@@ -82,7 +86,7 @@ export default function useOptions(multiple: Ref<boolean>,
           // keeps remembered Option
           else {
             const rememberedOption = selectedOptionsRef.value.find((selectedOption) => {
-              return _.isEqual(value, optionValue.value(selectedOption, selectedOptionsRef.value))
+              return _.isEqual(value, optionValue.value(selectedOption))
             })
             correctOptions.push(rememberedOption)
           }
@@ -102,18 +106,21 @@ export default function useOptions(multiple: Ref<boolean>,
   const shownOptions = computed<Array<Option | unknown>>(() => {
     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())
+        return optionSearchValue.value(option).toString().toLowerCase().includes(search.value.toLowerCase())
       })
     }
     return selectOptions.value
   })
 
-  const noOptions = computed(() => selectOptions.value.length === 0)
+  const noOptions = computed(() => !(infinite.value && search && search.value) && selectOptions.value.length === 0)
 
   const noResults = computed(() => search && search.value && shownOptions.value && shownOptions.value.length === 0)
 
   watch(() => modelValue.value, (value) => {
-    selectedOptions.value = _.isArray(value) ? value : [value]
+    if (!_.isEqual(value, tempValue.value)) {
+      tempValue.value = multiple.value ? [...value] : value
+      selectedOptions.value = _.isArray(value) ? value : value !== undefined ? [value] : []
+    }
   }, {deep: true})
 
   watch(optionMap, (newMap, oldMap) => {
@@ -181,7 +188,7 @@ export default function useOptions(multiple: Ref<boolean>,
       }
     }
     else {
-      return optionLabel.value(selectedOptions.value[0], selectedOptions.value)
+      return optionLabel.value(selectedOptions.value[0])
     }
   })
 

From 8fbee5773924e4e237ce74c7c864498b11c9ad8c Mon Sep 17 00:00:00 2001
From: Merlin Flach <merlin.flach@singular-it.de>
Date: Wed, 23 Nov 2022 15:41:06 +0100
Subject: [PATCH 2/6] docs: adapt readme to small prop changes

---
 README.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index cc22f9a..45215c0 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@
 ## Installation
 
 ```bash
-npm install @singularit/multiselect@beta
+npm install @singularit/multiselect
 ```
 
 
@@ -26,15 +26,15 @@ npm install @singularit/multiselect@beta
 | **multiple**              | `boolean`                                                           | `false`                        | Whether multiple options can be selected.                                                                                                                                                                                                                                                                      |
 | **selectOptions**         | `array`                                                             | `[]`                           | Array of options that can be selected. An option should look like this: `{value: ..., label: '...', ...}`.                                                                                                                                                                                                     |
 | **placeholder**           | `string`                                                            | `''`                           | The placeholder string will be displayed if no option is selected.                                                                                                                                                                                                                                             |
-| **optionLabel**           | `function`                                                          |                                | Function that determines which attribute of the option object should be displayed as label. The passed parameters are an option and an array of all selected options. By default, it returns the label attribute of the passed option.                                                                         |
-| **optionValue**           | `function`                                                          |                                | Function that determines which attribute of the option object should be used as value. The passed parameters are an option and an array of all selected options. By default, it returns the value attribute of the passed option.                                                                              |
+| **optionLabel**           | `function`                                                          |                                | Function that determines which attribute of the option object should be displayed as label. Passes an option as parameter. By default, it returns the label attribute of the passed option.                                                                                                                    |
+| **optionValue**           | `function`                                                          |                                | Function that determines which attribute of the option object should be used as value. Passes an option as parameter. By default, it returns the value attribute of the passed option.                                                                                                                         |
 | **optionDisabled**        | `function`                                                          |                                | Function which determines if an option is disabled. The passed parameters are an option and an array of all selected options. By default, it returns the disabled attribute of the passed option.                                                                                                              |
 | **displaySelectedValues** | <code>function&#124;string</code>                                   |                                | Determines what is displayed in the value display. Can be a string or a function returning a string. The passed parameter of the function is an array of all selected options. By default the amount of selected options will be displayed in multiselect and the `optionValue` of an option in single select. |
 | **clearable**             | `boolean`                                                           | `true`                         | Whether all selected options can be cleared.                                                                                                                                                                                                                                                                   |
 | **disabled**              | `boolean`                                                           | `false`                        | Disables the component. Values can still be pushed into the model value externally.                                                                                                                                                                                                                            |
 | **searchable**            | `boolean`                                                           | `false`                        | Whether options can be searched.                                                                                                                                                                                                                                                                               |
 | **searchProps**           | `object`                                                            |                                | Allows passing HTML input attributes to the search input element.                                                                                                                                                                                                                                              |
-| **optionSearchValue**     | `function`                                                          |                                | Determines which value of the option Object is searched.It is a function which returns the value of an option that is tracked by the search input.The passed parameters are an option and an array of all selected options.By default, it returns the label of the passed option.                              |
+| **optionSearchValue**     | `function`                                                          |                                | Determines which value of the option Object is searched. It is a function which returns the value of an option that is tracked by the search input. Passes an option as parameter. By default, it returns the label of the passed option.                                                                      |
 | **selectProps**           | `object`                                                            |                                | Allows passing HTML select attributes to the hidden select element.                                                                                                                                                                                                                                            |
 | **closeOnSelect**         | `boolean`                                                           | `false`                        | Whether the selection dropdown should automatically be closed after selecting/deselection an option.                                                                                                                                                                                                           |
 | **noOptionsText**         | `string`                                                            | `'Die Liste ist leer'`         | Text that is displayed if no options are given.                                                                                                                                                                                                                                                                |

From 53d1d0b82a193e949a0098bdd2e7758a0975cd72 Mon Sep 17 00:00:00 2001
From: Merlin Flach <merlin.flach@singular-it.de>
Date: Wed, 23 Nov 2022 15:49:42 +0100
Subject: [PATCH 3/6] fix: fix if condition, so optionValues can be arrays in
 single mode

---
 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 b54e5c7..948464a 100644
--- a/src/utils/useOptions.ts
+++ b/src/utils/useOptions.ts
@@ -119,7 +119,7 @@ export default function useOptions(multiple: Ref<boolean>,
   watch(() => modelValue.value, (value) => {
     if (!_.isEqual(value, tempValue.value)) {
       tempValue.value = multiple.value ? [...value] : value
-      selectedOptions.value = _.isArray(value) ? value : value !== undefined ? [value] : []
+      selectedOptions.value = multiple.value ? value : value !== undefined ? [value] : []
     }
   }, {deep: true})
 

From ddfc5d0087c48bb15a95a625606b08900fff90a7 Mon Sep 17 00:00:00 2001
From: Merlin Flach <merlin.flach@singular-it.de>
Date: Wed, 23 Nov 2022 16:06:46 +0100
Subject: [PATCH 4/6] test: add array as value for some options

---
 src/tests/multiselect.cy.js | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/tests/multiselect.cy.js b/src/tests/multiselect.cy.js
index aa355ca..d99e3cb 100644
--- a/src/tests/multiselect.cy.js
+++ b/src/tests/multiselect.cy.js
@@ -19,7 +19,7 @@ describe('Multiselect Component', () => {
     })
 
     it('should work as select input for single selections', () => {
-        const selectOptions = [{value: {abc: 'xyz', test: {xyz: 3}}, label: 'This'}, {value: 0, label: 'is'}, {value: 'haha', label: 'a'}, {value: 4, label: 'test'}]
+        const selectOptions = [{value: {abc: 'xyz', test: {xyz: 3}}, label: 'This'}, {value: 0, label: 'is'}, {value: 'lol', label: 'a'}, {value: ['list', 'value', 'haha'], label: 'test'}]
 
         cy.mount(MultiselectTester, {
             props: {
@@ -34,12 +34,12 @@ describe('Multiselect Component', () => {
         cy.get('[data-cy="dropdown"]').should('be.visible')
         cy.get('[data-cy="option"]').eq(3).click()
         cy.get('[data-cy="value-display"]').contains('test')
-        cy.get('[data-cy="selected"]').contains('4')
+        cy.get('[data-cy="selected"]').should('contain.text','[\n  "list",\n  "value",\n  "haha"\n]')
         cy.get('[data-cy="option"]').eq(0).click()
         cy.get('[data-cy="value-display"]').contains('This')
         cy.get('[data-cy="value-display"]').should('not.contain', 'test')
         cy.get('[data-cy="selected"]').contains('{ \"abc\": \"xyz\", \"test\": { \"xyz\": 3 } }')
-        cy.get('[data-cy="selected"]').should('not.contain', 4)
+        cy.get('[data-cy="selected"]').should('not.contain.text', '[\n  "list",\n  "value",\n  "haha"\n]')
         cy.get('[data-cy="clear"]').click()
         cy.get('[data-cy="value-display"]').should('not.exist')
         cy.get('[data-cy="dropdown"]').should('not.be.visible')
@@ -62,7 +62,7 @@ describe('Multiselect Component', () => {
     })
 
     it('should work as select input for multiple selections', () => {
-        const selectOptions = [{value: {abc: 'xyz', test: {xyz: 3}}, label: 'This'}, {value: 0, label: 'is'}, {value: 'haha', label: 'a'}, {value: 4, label: 'test'}]
+        const selectOptions = [{value: {abc: 'xyz', test: {xyz: 3}}, label: 'This'}, {value: 0, label: 'is'}, {value: 'lol', label: 'a'}, {value: ['list', 'value', 'haha'], label: 'test'}]
         cy.mount(MultiselectTester, {
             props: {
                 vModel: true,
@@ -77,25 +77,25 @@ describe('Multiselect Component', () => {
         cy.get('[data-cy="dropdown"]').should('be.visible')
         cy.get('[data-cy="option"]').eq(3).click()
         cy.get('[data-cy="value-display"]').contains('1 Option gewählt')
-        cy.get('[data-cy="selected"]').contains(4)
+        cy.get('[data-cy="selected"]').should('contain.text','[\n  "list",\n  "value",\n  "haha"\n]')
         cy.get('[data-cy="option"]').eq(2).click()
         cy.get('[data-cy="value-display"]').contains('2 Optionen gewählt')
-        cy.get('[data-cy="selected"]').contains(4)
-        cy.get('[data-cy="selected"]').contains('haha')
+        cy.get('[data-cy="selected"]').should('contain.text','[\n  "list",\n  "value",\n  "haha"\n]')
+        cy.get('[data-cy="selected"]').contains('lol')
         cy.get('[data-cy="option"]').eq(0).click()
         cy.get('[data-cy="value-display"]').contains('3 Optionen gewählt')
-        cy.get('[data-cy="selected"]').contains(4)
-        cy.get('[data-cy="selected"]').contains('haha')
+        cy.get('[data-cy="selected"]').should('contain.text','[\n  "list",\n  "value",\n  "haha"\n]')
+        cy.get('[data-cy="selected"]').contains('lol')
         cy.get('[data-cy="selected"]').contains('{ "abc": "xyz", "test": { "xyz": 3 } }')
         cy.get('[data-cy="option"]').eq(1).click()
         cy.get('[data-cy="value-display"]').contains('4 Optionen gewählt')
-        cy.get('[data-cy="selected"]').contains(4)
-        cy.get('[data-cy="selected"]').contains('haha')
+        cy.get('[data-cy="selected"]').should('contain.text','[\n  "list",\n  "value",\n  "haha"\n]')
+        cy.get('[data-cy="selected"]').contains('lol')
         cy.get('[data-cy="selected"]').contains('{ "abc": "xyz", "test": { "xyz": 3 } }')
         cy.get('[data-cy="selected"]').contains(0)
         cy.get('[data-cy="option"]').eq(2).click()
         cy.get('[data-cy="value-display"]').contains('3 Optionen gewählt')
-        cy.get('[data-cy="selected"]').should('not.contain', 'haha')
+        cy.get('[data-cy="selected"]').should('not.contain', 'lol')
         cy.get('[data-cy="clear"]').click()
         cy.get('[data-cy="value-display"]').should('not.exist')
         cy.get('[data-cy="dropdown"]').should('not.be.visible')
@@ -112,7 +112,7 @@ describe('Multiselect Component', () => {
     })
 
     it('should be possible to just set the modelValue externally in multiple mode', () => {
-        const selectOptions = [{value: {abc: 'xyz', test: {xyz: 3}}, label: 'This'}, {value: 0, label: 'is'}, {value: 'haha', label: 'a'}, {value: 4, label: 'test'}]
+        const selectOptions = [{value: {abc: 'xyz', test: {xyz: 3}}, label: 'This'}, {value: 0, label: 'is'}, {value: 'lol', label: 'a'}, {value: ['list', 'value', 'haha'], label: 'test'}]
         cy.mount(MultiselectTester, {
             props: {
                 vModel: true,
@@ -125,7 +125,7 @@ describe('Multiselect Component', () => {
         cy.get('[data-cy="dropdown"]').should('be.visible')
         cy.get('[data-cy="option"]').eq(3).click()
         cy.get('[data-cy="value-display"]').contains('1 Option gewählt')
-        cy.get('[data-cy="selected"]').contains(4)
+        cy.get('[data-cy="selected"]').should('contain.text','[\n  "list",\n  "value",\n  "haha"\n]')
         cy.get('[data-cy="multiselect"]').click()
         cy.get('[data-cy="dropdown"]').should('not.be.visible')
         cy.get('[data-cy="pushButton"]').click()

From 25e8d553b6491833d9a313ef71c0de115c840dfe Mon Sep 17 00:00:00 2001
From: Merlin Flach <merlin.flach@singular-it.de>
Date: Mon, 28 Nov 2022 13:16:39 +0100
Subject: [PATCH 5/6] chore: add selected Options as possible dependency for
 optionLabel again

---
 src/Multiselect.vue     | 2 +-
 src/utils/useOptions.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Multiselect.vue b/src/Multiselect.vue
index cdff281..acd1c23 100644
--- a/src/Multiselect.vue
+++ b/src/Multiselect.vue
@@ -220,7 +220,7 @@ export default defineComponent({
      * By default, it returns the label attribute of the passed option.
      */
     optionLabel: {
-      type: Function as PropType<((option: Option | unknown) => string)>,
+      type: Function as PropType<((option: Option | unknown, selectedOptions: Array<Option | unknown>) => string)>,
       required: false,
       default: (option: Option | unknown) => {
         if (option)
diff --git a/src/utils/useOptions.ts b/src/utils/useOptions.ts
index 948464a..4907510 100644
--- a/src/utils/useOptions.ts
+++ b/src/utils/useOptions.ts
@@ -9,7 +9,7 @@ export default function useOptions(multiple: Ref<boolean>,
   selectOptions: Ref<Array<Option | unknown>>,
   displaySelectedValues: Ref<((options: Array<Option | unknown>) => string) | string | undefined>,
   optionValue: Ref<(option: Option | unknown) => unknown>,
-  optionLabel: Ref<(option: Option | unknown) => string>,
+  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) => string>,
   infinite: Ref<boolean>,
@@ -188,7 +188,7 @@ export default function useOptions(multiple: Ref<boolean>,
       }
     }
     else {
-      return optionLabel.value(selectedOptions.value[0])
+      return optionLabel.value(selectedOptions.value[0], selectedOptions.value)
     }
   })
 

From 31811324ba340e62214112a503aa4bfc3438e0a6 Mon Sep 17 00:00:00 2001
From: Merlin Flach <merlin.flach@singular-it.de>
Date: Mon, 28 Nov 2022 13:18:55 +0100
Subject: [PATCH 6/6] docs: adapt readme to changes

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 45215c0..7cff83b 100644
--- a/README.md
+++ b/README.md
@@ -26,7 +26,7 @@ npm install @singularit/multiselect
 | **multiple**              | `boolean`                                                           | `false`                        | Whether multiple options can be selected.                                                                                                                                                                                                                                                                      |
 | **selectOptions**         | `array`                                                             | `[]`                           | Array of options that can be selected. An option should look like this: `{value: ..., label: '...', ...}`.                                                                                                                                                                                                     |
 | **placeholder**           | `string`                                                            | `''`                           | The placeholder string will be displayed if no option is selected.                                                                                                                                                                                                                                             |
-| **optionLabel**           | `function`                                                          |                                | Function that determines which attribute of the option object should be displayed as label. Passes an option as parameter. By default, it returns the label attribute of the passed option.                                                                                                                    |
+| **optionLabel**           | `function`                                                          |                                | Function that determines which attribute of the option object should be displayed as label. The passed parameters are an option and an array of all selected options. By default, it returns the label attribute of the passed option.                                                                         |
 | **optionValue**           | `function`                                                          |                                | Function that determines which attribute of the option object should be used as value. Passes an option as parameter. By default, it returns the value attribute of the passed option.                                                                                                                         |
 | **optionDisabled**        | `function`                                                          |                                | Function which determines if an option is disabled. The passed parameters are an option and an array of all selected options. By default, it returns the disabled attribute of the passed option.                                                                                                              |
 | **displaySelectedValues** | <code>function&#124;string</code>                                   |                                | Determines what is displayed in the value display. Can be a string or a function returning a string. The passed parameter of the function is an array of all selected options. By default the amount of selected options will be displayed in multiselect and the `optionValue` of an option in single select. |