Merge pull request #1463 from privy-open-source/fix/asyncronous-select-option

fix(select): fix selected values when option items updated after search

Author: adenvt

src/components/select/Select.spec.ts

@@ -476,7 +476,7 @@ it('should have clear button if prop `clearable` was provided', async () => {
 
   await fireEvent.click(clear)
 
-  expect(model.value).toBeUndefined()
+  expect(model.value).toStrictEqual({ text: '', value: undefined })
 })
 
 it('should clear search keyword if click clear button when select was opened', async () => {
@@ -595,3 +595,40 @@ it('should show selected items when options updated', async () => {
 
   expect(activator).toHaveTextContent('orange')
 })
+
+it('should be keep selected when option changed after search', async () => {
+  const options = ref<string[]>([
+    'apple',
+    'grape',
+    'orange',
+  ])
+  const model   = ref('apple')
+  const screen  = render({
+    components: { Select },
+    template  : `
+      <Select
+        v-model="model"
+        :options="options"
+      />
+    `,
+    setup () {
+      return { model, options }
+    },
+  })
+
+  const activator = screen.queryByTestId('select-activator')
+
+  expect(activator).toHaveTextContent('apple')
+
+  const select = screen.queryByTestId('select')
+  const caret  = screen.queryByTestId('select-caret-icon')
+
+  await fireEvent.click(caret)
+
+  expect(select).toHaveClass('select--open')
+
+  await fireEvent.update(screen.queryByTestId('select-search'), 'orange')
+  await nextTick()
+
+  expect(activator).toHaveTextContent('apple')
+})

src/components/select/Select.vue

@@ -190,7 +190,7 @@ import { isEqual } from '../utils/value'
 import { onStartTyping, watchPausable } from '@vueuse/core'
 import type { SizeVariant } from '../button'
 import type { MenuSizeVariant } from '../dropdown/'
-import { isNil } from 'lodash-es'
+import { isNil, uniqBy } from 'lodash-es'
 
 defineOptions({
   models: {
@@ -377,25 +377,28 @@ const modelWatcher = watchPausable(() => props.modelValue, (value) => {
 
 watch(items, (options) => {
   if (props.modelValue && options.length > 0) {
-    localModel.value = props.multiple
+    const value = props.multiple
       ? filterSelected(options, props.modelValue as unknown[])
       : findSelected(options, props.modelValue)
+
+    localModel.value = props.multiple
+      ? uniqBy([...localModel.value as SelectItem[], ...value as SelectItem[]], 'value')
+      : ((value as SelectItem).value === undefined ? localModel.value as SelectItem : value as SelectItem)
   }
 })
 
 function setValue (item?: SelectItem) {
-  let value: SelectItem | SelectItem[]
-
-  if (props.multiple) {
-    if (item) {
-      if (Array.isArray(localModel.value)) {
-        value = localModel.value.some((val) => isEqual(val.value, item.value))
-          ? localModel.value.filter((val) => !isEqual(val.value, item.value))
-          : [...localModel.value, item]
-      }
-    } else
-      value = []
-  } else
+  // define default item value
+  let value: SelectItem | SelectItem[] = props.multiple
+    ? []
+    : { text: '', value: undefined }
+
+  if (props.multiple && item && Array.isArray(localModel.value)) {
+    value = localModel.value.some((val) => isEqual(val.value, item.value))
+      ? localModel.value.filter((val) => !isEqual(val.value, item.value))
+      : [...localModel.value, item]
+  }
+  if (!props.multiple && item)
     value = item
 
   modelWatcher.pause()
@@ -431,7 +434,10 @@ function onClear () {
 }
 
 function isSelected (item: SelectItem) {
-  if (!localModel.value)
+  if (props.multiple && localModel.value.length === 0)
+    return false
+
+  if (!props.multiple && (localModel.value as SelectItem).value === undefined)
     return false
 
   if (props.multiple && Array.isArray(localModel.value))

src/components/select/index.md

@@ -51,6 +51,7 @@ description: Base form input.
   const province   = ref('')
   const city       = ref('')
   const multiValue = ref([])
+  const provinces  = ref([])
 
   const provincesAdapter = defineAsyncAdapter(async (keyword, page, perPage) => {
     const response = await getProvinces(keyword, page, perPage)
@@ -258,6 +259,10 @@ You can set size of select via `size` prop. Available size are `lg`, `md`, `sm`,
   <p-select :options="optionsD" v-model="multiValue" multiple />
 </preview>
 
+**Result :**
+
+<pre><code>{{ multiValue || [] }}</code></pre>
+
 ```vue
 <template>
   <p-select :options="optionsD" v-model="multiValue" multiple />
@@ -360,11 +365,24 @@ It will take care of loading, inifinite load, and other stuff.
 
 <pre><code>{{ province }}</code></pre>
 
+### Multiple value
+<preview>
+  <p-select
+    :adapter="provincesAdapter"
+    v-model="provinces"
+    multiple />
+</preview>
+
+**Result:**
+
+<pre><code>{{ provinces }}</code></pre>
+
 ```vue
 <template>
   <p-select
     :adapter="provincesAdapter"
-    v-model="province" />
+    v-model="province"
+    multiple />
 </template>
 
 <script setup>